Я пытаюсь настроить панель приложения с индикатором индикатора выполнения, пользователь продолжает посещать страницы, индикатор должен динамически меняться, не нажимая на них. Например, если пользователь завершает мою информационную страницу, затем нажмите «Продолжить», тогда цвет индикатора должен измениться. кто-нибудь помочь с этим дизайном и функциональностью, это будет действительно оценено
Вот точный дизайн 
Вот мой код, и он отображается как
import 'package:flutter/material.dart';
class Appbarbottomview extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 80,
// width: double.infinity,
child: Row(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
children: <Widget>[
Row(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 2,
//width: double.infinity,
width: 80,
color: Colors.red,
// margin: const EdgeInsets.only(left: 0.0,top: 5,right: 0.0),
),
],
),
],
),
Column(
children: <Widget>[
Container(
height: 50,
width: 0,
child: Icon(
Icons.check_circle,
size: 25,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
)
],
),
Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 50,
color: Colors.red,
// margin: const EdgeInsets.only(right:10,top:5,left:10.0),
),
],
),
],
)
],
),
Container(
child:Text('My info'),
),
],
),
Column(
children: <Widget>[
Row(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 2,
// width: double.infinity,
width: 80,
color: Colors.red,
// margin: const EdgeInsets.only(left: 0.0,top: 5,right: 0.0),
),
],
),
],
),
Column(
children: <Widget>[
Container(
height: 50,
width: 2,
child: Icon(
Icons.check_circle,
size: 25,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
),
)
],
),
Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 50,
color: Colors.red,
// margin: const EdgeInsets.only(right:5,top:5,left:10.0),
),
],
),
],
)
],
),
Container(
child: Text('Company Info'),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 2,
// width: double.infinity,
width: 80,
color: Colors.red,
// margin: const EdgeInsets.only(left: 10.0,top: 10,right: 10.0),
),
],
),
],
),
Column(
children: <Widget>[
Container(
height: 50,
width: 5,
child: Icon(
Icons.check_circle,
size: 25,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
),
)
],
),
Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 50,
color: Colors.red,
// margin: const EdgeInsets.only(right:0,top:5,left:0.0),
),
],
),
],
)
],
),
Container(
child: Text('Submit'),
),
],
),
],
),
);
}
}