skip to Main Content

I am trying to make an app bar exactly like what you see here

enter image description here

However as I’m new to flutter I do not have any idea how I can make it, I already tried MainCollapsingToolbar but it didn’t get me anywhere. Does anyone have any idea if can I make it?

2

Answers


  1. you can use SliverAppBar, this can help you

    Login or Signup to reply.
  2. You can try with a simple ‘Silver Bar’, then you can customize it for your own use.

    This is an example:

    import 'package:flutter/material.dart';
    
    void main() => runApp(const AppBarApp());
    
    class AppBarApp extends StatelessWidget {
      const AppBarApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          home: SliverAppBarExample(),
        );
      }
    }
    
    class SliverAppBarExample extends StatefulWidget {
      const SliverAppBarExample({super.key});
    
      @override
      State<SliverAppBarExample> createState() => _SliverAppBarExampleState();
    }
    
    class _SliverAppBarExampleState extends State<SliverAppBarExample> {
      bool _pinned = true;
      bool _snap = false;
      bool _floating = false;
    
    // [SliverAppBar]s are typically used in [CustomScrollView.slivers], which in
    // turn can be placed in a [Scaffold.body].
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                pinned: _pinned,
                snap: _snap,
                floating: _floating,
                expandedHeight: 160.0,
                flexibleSpace: const FlexibleSpaceBar(
                  title: Text('SliverAppBar'),
                  background: FlutterLogo(),
                ),
              ),
              const SliverToBoxAdapter(
                child: SizedBox(
                  height: 20,
                  child: Center(
                    child: Text('Scroll to see the SliverAppBar in effect.'),
                  ),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      color: index.isOdd ? Colors.white : Colors.black12,
                      height: 100.0,
                      child: Center(
                        child: Text('$index', textScaleFactor: 5),
                      ),
                    );
                  },
                  childCount: 20,
                ),
              ),
            ],
          ),
          bottomNavigationBar: BottomAppBar(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: OverflowBar(
                overflowAlignment: OverflowBarAlignment.center,
                children: <Widget>[
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('pinned'),
                      Switch(
                        onChanged: (bool val) {
                          setState(() {
                            _pinned = val;
                          });
                        },
                        value: _pinned,
                      ),
                    ],
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('snap'),
                      Switch(
                        onChanged: (bool val) {
                          setState(() {
                            _snap = val;
                            // Snapping only applies when the app bar is floating.
                            _floating = _floating || _snap;
                          });
                        },
                        value: _snap,
                      ),
                    ],
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('floating'),
                      Switch(
                        onChanged: (bool val) {
                          setState(() {
                            _floating = val;
                            _snap = _snap && _floating;
                          });
                        },
                        value: _floating,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    

    You can find more examples by searching with the keyword ‘Silver Bar’.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search