I am using android studio and flutter. I want to build the screen as shown below in the image:screen Image

let's say I have 4 screens. on the first screen, the bar will load up to 25%. the user will move to next screen by clicking on continue, the linearbar will load up to 50% and so on. the user will get back to previous screens by clicking on the back button in the appbar.

• I tried stepper but it doesn't serve my purpose.

CodePudding user response：

You can use the widget LinearProgressIndicator(value: 0.25,) for the first screen and with value: 0.5 for the second screen etc.

If you want to change the bar value within a screen, just use StatefullWidget's setState(), or any state management approaches will do.

CodePudding user response：

import 'package:flutter/material.dart';

class ProgressPage extends StatefulWidget {
  const ProgressPage({super.key});

  @override
  State<ProgressPage> createState() => _ProgressPageState();
}

class _ProgressPageState extends State<ProgressPage> {
  final _pageController = PageController();

  final _pageCount = 3;

  int? _currentPage;
  double? _screenWidth;
  double? _unit;
  double? _progress;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      _currentPage = _pageController.page?.round();
      setState(() {
        _progress = (_currentPage!   1) * _unit!;
      });
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _screenWidth = MediaQuery.of(context).size.width;
    _unit = _screenWidth! / _pageCount;
    _progress ??= _unit;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('HOZEROGOLD')),
      body: Column(
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              color: Colors.yellow,
              height: 10,
              width: _progress,
            ),
          ),
          Expanded(
            child: PageView(
              controller: _pageController,
              children: _createPage(),
            ),
          ),
        ],
      ),
    );
  }

  List<Widget> _createPage() {
    return List<Widget>.generate(
      _pageCount,
      (index) => Container(
        color: Colors.white,
        child: Center(
          child: ElevatedButton(
            onPressed: () => _moveNextPage(),
            child: Text('NEXT $index'),
          ),
        ),
      ),
    );
  }

  void _moveNextPage() {
    if (_pageController.page!.round() == _pageCount-1) {
      _pageController.jumpToPage(0);
    } else {
      _pageController.nextPage(
          curve: Curves.bounceIn, 
          duration: const Duration(milliseconds: 100));
    }
  }
}

HAPPY CODING! I hope it will be of help.