創建Flutter按鈕菜單

Question

我正在開發一個帶有顫動的應用程序，我被分配創建一個類似於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,
                ),
              ],
            ),
          ],
        )
      ),
    );
  }
}

Reult：