skip to Main Content

I’m making an app for study and it’s the first time I use SliverAppBar and SliverList. Inside the SliverAppBar Flexible I put two buttons and when I scroll on the screen, the buttons flatten along with the SliverAppBar but the button icons don’t.

To manage the state of the app I’m going to use GetX.

HomePage:

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.deepPurple,
      ),
      drawer: const Drawer(),
      backgroundColor: Colors.deepPurple,
      body: ScrollConfiguration(
        behavior: NoGlowBehavior(),
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              toolbarHeight: 0.0,
              pinned: false,
              snap: true,
              floating: true,
              expandedHeight: 120.0,
              backgroundColor: const Color(0xFF2e2e2e),
              flexibleSpace: Stack(
                alignment: Alignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 50.0),
                    child: Container(
                      color: Colors.deepPurple,
                    ),
                  ),
                  Column(
                    children: [
                      Expanded(
                        flex: 4,
                        child: Padding(
                          padding:
                              const EdgeInsets.only(left: 16.0, right: 16.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: const [
                              Text(
                                '',
                              ),
                              Text(
                                '',
                              )
                            ],
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 6,
                        child: Row(
                          children: [
                            const SizedBox(width: 16.0),
                            Expanded(
                              child: Card(
                                child: IconButton(
                                  icon: const Icon(
                                    Icons.push_pin,
                                  ),
                                  onPressed: () {},
                                ),
                              ),
                            ),
                            const SizedBox(width: 20.0),
                            Expanded(
                              child: Card(
                                child: IconButton(
                                  icon: const Icon(
                                    Icons.add,
                                  ),
                                  onPressed: () {},
                                ),
                              ),
                            ),
                            const SizedBox(width: 16.0)
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    color: const Color(0xFF2e2e2e),
                    child: ListView.separated(
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        return Container(
                          color: Colors.red,
                          height: 100.0,
                        );
                      },
                      separatorBuilder: (context, index) =>
                          const SizedBox(height: 10.0),
                      itemCount: 10,
                      padding: const EdgeInsets.symmetric(horizontal: 20.0),
                    ),
                  );
                },
                childCount: 1,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Main:

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/home',
      debugShowCheckedModeBanner: false,
      getPages: [
        GetPage(
          name: '/home',
          page: () => const HomePage(),
        ),
      ],
    ),
  );
}

I had some ideas to solve this bug but without success yet, I really appreciate your help.

2

Answers


  1. Please refer below code :

    return Scaffold(
      body: ScrollConfiguration(
        behavior: const ScrollBehavior(),
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              snap: true,
              floating: true,
              pinned: true,
              expandedHeight: 140.0,
              backgroundColor: const Color(0xFF2e2e2e),
              flexibleSpace: Stack(
                alignment: Alignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(bottom: 50.0),
                    child: Container(
                      color: Colors.deepPurple,
                    ),
                  ),
                  Column(
                    children: [
                      Expanded(
                        flex: 4,
                        child: Padding(
                          padding:
                              const EdgeInsets.only(left: 16.0, right: 16.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: const [
                              Text(
                                '',
                              ),
                              Text(
                                '',
                              )
                            ],
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 6,
                        child: Row(
                          children: [
                            const SizedBox(width: 16.0),
                            Expanded(
                              child: Card(
                                child: IconButton(
                                  icon: const Icon(
                                    Icons.push_pin,
                                  ),
                                  onPressed: () {},
                                ),
                              ),
                            ),
                            const SizedBox(width: 20.0),
                            Expanded(
                              child: Card(
                                child: IconButton(
                                  icon: const Icon(
                                    Icons.add,
                                  ),
                                  onPressed: () {},
                                ),
                              ),
                            ),
                            const SizedBox(width: 16.0)
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    color: const Color(0xFF2e2e2e),
                    child: ListView.separated(
                      physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) {
                        return Container(
                          color: Colors.red,
                          height: 100.0,
                        );
                      },
                      separatorBuilder: (context, index) =>
                          const SizedBox(height: 10.0),
                      itemCount: 10,
                      padding: const EdgeInsets.symmetric(horizontal: 20.0),
                    ),
                  );
                },
                childCount: 1,
              ),
            ),
          ],
        ),
      ),
    );
    

    enter image description here

    Login or Signup to reply.
  2. just add collapsedHeight: 50, in SliverAppBar:

    SliverAppBar(
                toolbarHeight: 0.0,
                collapsedHeight: 50,
                pinned: false,
                snap: true,
                floating: true,
                expandedHeight: 120.0,
                backgroundColor: const Color(0xFF2e2e2e),
                flexibleSpace: Stack(
                  alignment: Alignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(bottom: 50.0),
                      child: Container(
                        color: Colors.deepPurple,
                      ),
                    ),
                    Column(
                      children: [
                        Expanded(
                          flex: 6,
                          child: Row(
                            children: [
                              const SizedBox(width: 16.0),
                              Expanded(
                                child: Card(
                                  child: IconButton(
                                    icon: const Icon(
                                      Icons.push_pin,
                                    ),
                                    onPressed: () {},
                                  ),
                                ),
                              ),
                              const SizedBox(width: 20.0),
                              Expanded(
                                child: Card(
                                  color: Colors.white,
                                  child: IconButton(
                                    icon: const Icon(
                                      Icons.add,
                                    ),
                                    onPressed: () {},
                                  ),
                                ),
                              ),
                              const SizedBox(width: 16.0)
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search