Question 76234 in Flutter Question posted in
The official Flutter documentation can be found here.

Show appBar when scrolling – Flutter

I would like to show appBar when scrolling, like video below

https://imgur.com/vAq7UCT

This is what I have now, but appBar not showing when scroll

https://imgur.com/Bq5zAnQ

Here the code

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _showButton(),
      backgroundColor: Colors.grey.shade200,
      extendBodyBehindAppBar: true,
      // appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0),
      body: CustomScrollView(slivers: [
        SliverAppBar(expandedHeight:  MediaQuery.of(context).size.width,
        flexibleSpace: FlexibleSpaceBar(
          title: Text("This is sample"),
          background: _showPropertyUnitImage(),
        ),),SliverList(delegate: SliverChildListDelegate([
          _showWidget(context)
        ]))
      ],)
    );
  }

Can some assist me to the right direction? Thanks

Tags:

3

Answers


  1. 0

    Using DefaultTabController

    DefaultTabController(
      length: 2,
      child: new Scaffold(
        body: new NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              new SliverAppBar(
                title: Text("Application"),
                floating: true,
                pinned: true,
                snap: true,
                bottom: new TabBar(
                  tabs: <Tab>[
                    new Tab(text: "T"),
                    new Tab(text: "B"),
                  ], // <-- total of 2 tabs
                ),
              ),
            ];
          },
          body: new TabBarView(
            children: <Widget>[
              Center(
                  child: Text(
                'T Tab',
                style: TextStyle(fontSize: 30),
              )),
              Center(
                  child: Text(
                'B Tab',
                style: TextStyle(fontSize: 30),
              )),
            ],
          ),
        ),
      ),
    );
    Login or Signup to reply.
  3. 0

    Code:

    import 'package:flutter/material.dart';
import 'package:flutter_advanced_drawer/flutter_advanced_drawer.dart';
import 'package:google_fonts/google_fonts.dart';
import '../configurations/size_config.dart';



class CustomScrollViewScreen extends StatefulWidget {
  const CustomScrollViewScreen({Key? key}) : super(key: key);

  @override
  State<CustomScrollViewScreen> createState() => _CustomScrollViewScreenState();
}

class _CustomScrollViewScreenState extends State<CustomScrollViewScreen> with TickerProviderStateMixin {



  final _advancedDrawerController = AdvancedDrawerController();
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      backgroundColor: Colors.red,
      body: NestedScrollView(
          headerSliverBuilder:
              (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                elevation: 0,
                backgroundColor: Colors.white,
                centerTitle: true,
                title: Text("Strawberry pearl",
                    style: GoogleFonts.inter(color: Colors.blue,

                      fontWeight: FontWeight.bold,
                      fontSize: SizeConfig.screenHeight! * 0.026,
                    )),
                leading: IconButton(
                  onPressed: (){

                  },
                  icon: ValueListenableBuilder<AdvancedDrawerValue>(
                    valueListenable: _advancedDrawerController,
                    builder: (_, value, __) {
                      return AnimatedSwitcher(
                        duration: Duration(milliseconds: 250),
                        child: Icon(
                          Icons.clear,
                          color: Colors.blue,
                        ),
                      );
                    },
                  ),
                ),
                expandedHeight: SizeConfig.screenHeight! * 0.3,
                pinned: true,
                forceElevated: true,
                flexibleSpace: Stack(
                  children: [
                    FlexibleSpaceBar(
                      background: Image.asset(
                        "assets/download.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),

                  ],
                ),
              ),

            ];
          }, body: Text(""),

      ),
    );
  }


}

    Video demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search