Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing SliverAppBar title color in Flutter application

I'm using a SliverAppBar including a background Image and Title. Title text is white and I need to change the color to black on the AppBar is 'reduced' (since tabbar is white as well).

How to do that ?

NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {;
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                backgroundColor: Colors.white,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(_event.name,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        )),
                    background: CachedNetworkImage(
                      imageUrl: _event?.imageMediumUrl ??
                          'http://preprod.tibib-live.com/medias/cached-media/medium/5bea5964109aa-c827b05facc3781485e584dac2f4dddc.png',
                      fit: BoxFit.cover,
                    )),
              ),
              SliverPersistentHeader(
                delegate: _SliverAppBarDelegate(
                  TabBar(
                    labelColor: Colors.white,
                    indicatorColor: Colors.red,
                    unselectedLabelColor: Colors.grey,
                    tabs: [
                      Tab(icon: Icon(Icons.info), text: "Info"),
                      Tab(icon: Icon(Icons.people), text: "Courses"),
                    ],
                  ),
                ),
                pinned: true,
              ),
            ];
          },
          body: TabBarView(
            children: <Widget>[_buildInfo(), _buildTrials()],
          ),
        ),
like image 242
fvisticot Avatar asked Dec 04 '18 22:12

fvisticot


People also ask

How do you use Sliverappbar in flutter?

We have set the MyApp class to be a stateless widget. Then with the Widget build(BuildContext context) we have started describing the UI of the app. Our MaterialApp starts with the Scaffold widget. Then in the CustomScrollView widget, we have slivers property that takes a list of widgets and makes them scrollable.

What is flexibleSpace flutter?

flexibleSpace field, a flexible space bar expands and contracts as the app scrolls so that the AppBar reaches from the top of the app to the top of the scrolling contents of the app.

How do you add a title to the app bar flutter?

Flutter – Center Align Application Bar Title To center align text of App Bar title, use Scaffold and in appBar, set the centerTitle property to true. Following is a quick code snippet to align title at the center of application bar.


1 Answers

You can do it using a ScrollController , listen to the scroll and compare the offset with the default size of the Toolbar. I made an example for you:

            class TestingNewState extends State<TestingNew> {
              ScrollController _scrollController;

              bool lastStatus = true;

              _scrollListener() {
                if (isShrink != lastStatus) {
                  setState(() {
                    lastStatus = isShrink;
                  });
                }
              }

              bool get isShrink {
                return _scrollController.hasClients &&
                    _scrollController.offset > (200 - kToolbarHeight);
              }

              @override
              void initState() {
                _scrollController = ScrollController();
                _scrollController.addListener(_scrollListener);
                super.initState();
              }

              @override
              void dispose() {
                _scrollController.removeListener(_scrollListener);
                super.dispose();
              }

              @override
              Widget build(BuildContext context) {
                return NestedScrollView(
                  controller: _scrollController,
                  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                    return <Widget>[
                      SliverAppBar(
                        expandedHeight: 200.0,
                        floating: false,
                        pinned: true,
                        backgroundColor: Colors.white,
                        flexibleSpace: FlexibleSpaceBar(
                            centerTitle: true,
                            title: Text("text sample",
                                style: TextStyle(
                                  color: isShrink ? Colors.black : Colors.white,
                                  fontSize: 16.0,
                                )),
                            background: CachedNetworkImage(
                              imageUrl:
                                  'http://preprod.tibib-live.com/medias/cached-media/medium/5bea5964109aa-c827b05facc3781485e584dac2f4dddc.png',
                              fit: BoxFit.cover,
                            )),
                      ),
                    ];
                  },
                  body: Center(
                    child: Text("hello world"),
                  ),
                );
              }
            }
like image 165
diegoveloper Avatar answered Sep 21 '22 18:09

diegoveloper