dart - 如何像 flutter 中提供的照片那样用带有箭头的仪表构建一个小部件

Question

我想创建一个小部件，它将构建这张照片中的描述

我已经创建了仪表条，但我仍然不知道如何添加从条的开始到结束的数字以及底部的箭头，其中放置您拥有的点并在其上方使用相同的颜色

child: Row(children: <Widget>[
        Column(children: <Widget>[
            Padding(
              padding: EdgeInsets.all(5.0),
              child: Container(
                decoration: new BoxDecoration(
                  border: new Border(right: BorderSide(color: Colors.black))
                ),
                child: Column(
                        children: <Widget>[
                          Text('Points'),
                          Text('38'),
                        ],
                      ),
              ),
            ),

        ],),
        // green bar
        Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.only(right:10.0),
            child: Container(
              width:ratewidth,
              decoration: new BoxDecoration(
                    border: new Border(bottom: BorderSide(color: Colors.green, width: 5.0))
                  ),
            ),
          )

        ],),
        //yellow bar
        Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.only(right:10.0),
            child: Container(
              width:ratewidth,
              decoration: new BoxDecoration(
                    border: new Border(bottom: BorderSide(color: Colors.yellow, width: 5.0))
                  ),
            ),
          ),
        ],),

        ...

      ],)

Answer 1

Row、Column 和 Align 的组合可以在几行内完成。

最难的部分实际上是三角形。通常，您会希望对三角形使用 CustomPainter，但我在这里很懒。所以我结合了平移、旋转和剪辑。

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ScoreMeter(
              score: 1,
            ),
          )
        ],
      ),
    );
  }
}

class ScoreMeter extends StatelessWidget {
  final int score;

  ScoreMeter(
      {
      this.score,
      Key key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100.0,
      child: Row(
        children: <Widget>[
          Expanded(
            child: ScoreMeterItem(
                score: score, color: Colors.green, minRange: 0, maxRange: 50),
          ),
          Expanded(
            child: ScoreMeterItem(
                score: score,
                color: Colors.yellow,
                minRange: 51,
                maxRange: 100),
          ),
          Expanded(
            child: ScoreMeterItem(
                score: score,
                color: Colors.orange,
                minRange: 101,
                maxRange: 150),
          ),
          Expanded(
            child: ScoreMeterItem(
                score: score, color: Colors.red, minRange: 151, maxRange: 200),
          ),
          Expanded(
            child: ScoreMeterItem(
                score: score,
                color: Colors.purple,
                minRange: 201,
                maxRange: 250),
          ),
          Expanded(
            child: ScoreMeterItem(
                score: score,
                color: Colors.brown,
                minRange: 251,
                maxRange: 300),
          ),
        ],
      ),
    );
  }
}

class ScoreMeterItem extends StatelessWidget {
  /// Hello World
  final int score;
  final Color color;
  final int minRange;
  final int maxRange;

  ScoreMeterItem(
      {this.score,
      this.color = Colors.grey,
      @required this.minRange,
      @required this.maxRange,
      Key key})
      : assert(minRange != null),
        assert(maxRange != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4.0),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(minRange.toString(), style: theme.textTheme.caption),
              Text(maxRange.toString(), style: theme.textTheme.caption),
            ],
          ),
          ScoreMeterBar(color: color),
          score >= minRange && score <= maxRange
              ? SizedBox(
                  height: 10.0,
                  child: Align(
                    alignment: Alignment(
                        (score - minRange) / (maxRange - minRange) * 2 - 1,
                        0.0),
                    child: Arrow(color: color),
                  ),
                )
              : SizedBox()
        ],
      ),
    );
  }
}

class Arrow extends StatelessWidget {
  final Color color;

  Arrow({this.color});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 5.0,
      width: 10.0,
      child: ClipRect(
        child: OverflowBox(
          maxWidth: 10.0,
          maxHeight: 10.0,
          child: Align(
            alignment: Alignment.topCenter,
            child: Transform.translate(
              offset: Offset(.0, 5.0),
              child: Transform.rotate(
                angle: pi / 4,
                child: Container(
                  width: 10.0,
                  height: 10.0,
                  color: color,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class ScoreMeterBar extends StatelessWidget {
  final Color color;

  ScoreMeterBar({this.color = Colors.grey, Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 8.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(4.0),
        ),
        color: color,
      ),
    );
  }
}