Create Flutter button menu

Question

I'm developing an application with flutter and I was assigned to create a dynamic menu similar to that of the duolingo and sololearn applications. I would like you to be able to collaborate with me how to make this menu, if you can share your knowledge Thanks for your time. I would like create this menu with flutter:

Answer 1

You can use percent_indicator to achieve a similar result.

In your pubspec.yml

dependencies:
 percent_indicator: "^1.0.16"

And the widget of menu Item would be as:

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,
)

To be able to control the distribution of buttons, You may need to use a column of rows.

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

Use MainAxisAlignment property for handling the positioning of elements in the row or the column.

A complete example:

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: