2

like with Instagram in profile page of that, i want to fix Tabbar on top of screen when i scroll the view, for example:

enter image description here

i think i should implementing that with SliverAppBar, this is my code, but it doesn't work correctly and in that top of tab elements will be change height

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  ScrollController _scrollViewController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 2);
    _scrollViewController = ScrollController(initialScrollOffset: 0.0);
  }

  @override
  void dispose() {
    _tabController.dispose();
    _scrollViewController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollViewController,
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Column(
                children: <Widget>[
                  Container(
                    height: 200.0,
                    color: Colors.green,
                  ),
                  Container(
                    height: 200.0,
                    color: Colors.yellow,
                  ),

                ],
              ),
              pinned: true,
              floating: true,
              forceElevated: boxIsScrolled,
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "Home",
                    icon: Icon(Icons.home),
                  ),
                  Tab(
                    text: "Example page",
                    icon: Icon(Icons.help),
                  )
                ],
                controller: _tabController,
              ),
            )
          ];
        },
        body: TabBarView(
          children: <Widget>[
            PageOne(),
            PageTwo(),
          ],
          controller: _tabController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.control_point),
        onPressed: () {
          _tabController.animateTo(1,
              curve: Curves.bounceInOut, duration: Duration(milliseconds: 10));

          // _scrollViewController.animateTo(
          //     _scrollViewController.position.minScrollExtent,
          //     duration: Duration(milliseconds: 1000),
          //     curve: Curves.decelerate);

          _scrollViewController
              .jumpTo(_scrollViewController.position.maxScrollExtent);
        },
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            'assets/photos/wallpaper-1.jpg',
            width: 200.0,
          ),
          Image.asset(
            'assets/photos/wallpaper-2.jpg',
            width: 200.0,
          ),
          Image.asset(
            'assets/photos/wallpaper-3.jpg',
            width: 200.0,
          ),
        ],
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 250.0,
      itemBuilder: (context, index) => Container(
        padding: EdgeInsets.all(10.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(5.0),
          color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      ),
    );
  }
}

1 Answer 1

8

Does this work for you?

import 'package:flutter/material.dart';

class Popo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: SafeArea(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              backgroundColor: Colors.grey[100],
              title: Container(
                color: Colors.grey[100],
                height: 200,
                width: MediaQuery.of(context).size.width,
                child: Center(
                  child: Text(
                    "Head",
                    style: TextStyle(
                      color: Colors.black
                    ),
                  ),
                ),
              ),
            ),
            SliverAppBar(
              pinned: true,
              backgroundColor: Colors.white,
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Icon(
                    Icons.dashboard
                  ),
                  Icon(
                      Icons.tv
                  ),
                  Icon(
                      Icons.person
                  ),
                ],
              ),
            ),
            SliverAnimatedList(
              itemBuilder: (_, index, ___){
                return ListTile(
                  title: Text(index.toString()),
                );
              },
              initialItemCount: 100,
            )
          ],
        ),
      ),
    );
  }
}

The ouput:

enter image description here

Sign up to request clarification or add additional context in comments.

6 Comments

@Josteve Adekanbi thanks a lot, how can customize SliverAppBar? like with instagram i have more Column here
Could you do as you wish? I have to do tabbar like Instagram. @DolDurma
@AlperenARICI yes, you can test this sample and that works as well
yes thank you, this works, but I do not exactly that, like in instagram, the menu below shifts to the right and left. I want. @DolDurma
@AlperenARICI your mean is bottomNavigation menus?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.