How to implement a horizontal scroll which is controlled by bottom minus bar in flutter

Question

I have to implement a horizontal scroll list in flutter.I could do that and have included the code below(The code is still to be modified but the base of the code is good enough to put in the pictures and other such details)

But the problem is the minus bar below the horizontal scroll.I don't know what feature in flutter allows to do that.I search many things but other than radio boxes,check boxes, switches,etc I am not able to find any details of it.Please have a look at the screenshot of the app,I have indicated the minus bar control in red. Home screen,the minus bar indicated in red

The code I have written:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black ,
       body: Container(
         margin: EdgeInsets.symmetric(vertical: 20.0),

         height: 500,
         child: ListView(
            // This next line does the trick.
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            children: <Widget>[
              Container(
                width:400 ,
                color: Colors.red,
              ),
              Container(
                width: 400.0,
                color: Colors.blue,
              ),
              Container(
                width: 400.0,
                color: Colors.green,
              ),

            ],
          ),
       )
    );
  }
}

Answer 1

What you want to look for is not ListView but PageView here is a small code sample to try in DartPad and see how you could make your layout.

Basically I am using a PageController to change the current page by taping on certain widgets.

Code

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: MyWidget()),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _items = [Colors.red, Colors.blue, Colors.yellow];
  final _pageController = PageController();
  
  int _currentPageNotifier = 0;

  final double _indicatorWidth = 30;

  Widget _buildPageView() {
    return PageView.builder(
      controller: _pageController,
      itemCount: _items.length,
      itemBuilder: (context, index) => Center(
        child: FlutterLogo(
          colors: _items[index],
          size: 50,
        ),
      ),
      onPageChanged: (int index) =>
          setState(() => _currentPageNotifier = index),
    );
  }

  Widget _buildIndicator() {
    List<Widget> itemWidgets = [];
    for (int index = 0; index < _items.length; index++) {
      itemWidgets.add(GestureDetector(
        onTap: () => _pageController.animateToPage(
          index,
          duration: Duration(milliseconds: 300),
          curve: Curves.ease,
        ),
        child: Container(
          decoration: BoxDecoration(
            color: _currentPageNotifier == index
                ? Colors.green
                : Colors.grey,
            borderRadius: BorderRadius.circular(9),
          ),
          margin: EdgeInsets.only(right: 10),
          width: _indicatorWidth,
          height: 8,
        ),
      ));
    }
    return Positioned(
      bottom: MediaQuery.of(context).size.height / 2 - 50,
      left: MediaQuery.of(context).size.width / 2 -
          _items.length * _indicatorWidth +
          _items.length * 10,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: itemWidgets,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        _buildPageView(),
        _buildIndicator(),
      ],
    );
  }
}