Add AppBar inside SliverAppBar in Flutter

Question

I'm new to Flutter. I wanted to show the search box inside the SliverAppBar and show items in grid view at the bottom. so that when the user slides up, it will show only the search box inside the sliver app. Now it looks like this https://ibb.co/MB4Ww6v. I wanted to make the search box at the bottom of the sliver app as shown in the red colour in the image.

This is my code.

  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 200,
            centerTitle: true,
            flexibleSpace: AppBar(
              title: Container(
                height: 45,
                child: TextField(
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(top: 5, left: 15),
                    suffixIcon: IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {
                        print('sesarch');
                      },
                    ),
                    filled: true,
                    fillColor: Colors.white,
                    hintText: "What are you looking for ?",
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),
              ),
              elevation: 20,
            ),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 100,
                  child: Center(
                    child: Text('eee'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

score 4 · Answer 1 · answered Mar 20 '20 at 05:51

You can copy paste run full code below
You can use bottom attribute of SliverAppBar

code snippet

SliverAppBar(
                pinned: true,
                expandedHeight: 200,
                centerTitle: true,
                bottom: AppBar(
                  title: Container(

working demo

full code

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 200,
            centerTitle: true,
            bottom: AppBar(
              title: Container(
                height: 45,
                child: TextField(
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(top: 5, left: 15),
                    suffixIcon: IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {
                        print('sesarch');
                      },
                    ),
                    filled: true,
                    fillColor: Colors.white,
                    hintText: "What are you looking for ?",
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),
              ),
              elevation: 20,
            ),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  height: 100,
                  child: Center(
                    child: Text('eee'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Add AppBar inside SliverAppBar in Flutter

1 Answers1