Создать кнопку меню флаттера

Question

Я разрабатываю приложение с флаттером, и мне поручили создать динамическое меню, похожее на меню приложений duolingo и sololearn.Я хотел бы, чтобы вы могли сотрудничать со мной, как сделать это меню, если вы можете поделиться своими знаниями Спасибо за ваше время.Я хотел бы создать это меню с флаттером:

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

Результат: