Question

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

Answer 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,
                ),
              ],
            ),
          ],
        )
      ),
    );
  }
}

结果：

创建Flutter按钮菜单

1 个答案: