创建 Flutter 按钮菜单答案

【问题标题】：Create Flutter button menu创建 Flutter 按钮菜单
【发布时间】：2019-09-22 15:52:49
【问题描述】：

我正在开发一个带有 Flutter 的应用程序，我被分配创建一个类似于 duolingo 和 sololearn 应用程序的动态菜单。如果你能分享你的知识，我希望你能够与我合作如何制作这个菜单谢谢你的时间。我想用颤振创建这个菜单：

【问题讨论】：

标签： gridview dart flutter flutter-layout

【解决方案1】：

您可以使用percent_indicator 来获得类似的结果。

在你的pubspec.yml

dependencies:
 percent_indicator: "^1.0.16"

菜单项的小部件如下：

new CircularPercentIndicator(
  radius: 60.0,
  lineWidth: 5.0,
  percent: 1.0,
  center: ...,// put the center of circle (image or what you want)
  progressColor: Colors.green,
)

为了能够控制按钮的分布，您可能需要使用一列行。

Column(
  children: [
    Row(
      ... // your first line set of buttons
    ),
    Row(
      ... // your second line set of buttons
    ),
    Row(
      ... // your third line set of buttons
    ),
  ],
)

使用MainAxisAlignment 属性来处理行或列中元素的定位。

一个完整的例子：

import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my solo learn',
      home: Scaffold(
        appBar: AppBar(
          title: Text('my solo learn'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                CircularPercentIndicator(
                  radius: 60.0,
                  lineWidth: 5.0,
                  percent: 1.0,
                  center:  Text('lesson1'),
                  progressColor: Colors.green,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                CircularPercentIndicator(
                  radius: 60.0,
                  lineWidth: 5.0,
                  percent: 0.0,
                  center:  Text('lesson2'),
                  progressColor: Colors.green,
                ),
                CircularPercentIndicator(
                  radius: 60.0,
                  lineWidth: 5.0,
                  percent: 0.8,
                  center:  Text('lesson3'),
                  progressColor: Colors.green,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                CircularPercentIndicator(
                  radius: 60.0,
                  lineWidth: 5.0,
                  percent: 0.6,
                  center:  Text('lesson4'),
                  progressColor: Colors.green,
                ),
              ],
            ),
          ],
        )
      ),
    );
  }
}

结果：

【讨论】：

Ammar Atef 我想构建与（duolingo 或 sololearn）相同的仪表板如何分发按钮图标
@raranibar 我已经编辑了答案，请看一下