Add image banner above app bar title in Flutter

Issue

I need to add an image at the top of the app bar in Flutter. Below the image will be the title and action icons. How do I achieve this?

Solution

You can use CustomScrollView then you can find SliverAppBar>bottom

Updated Result

Updated Widget

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 300,
              floating: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                    color: Colors.cyanAccent,
                    child: Image.asset(
                      "assets/ocean.jpg",
                      fit: BoxFit.cover,
                    )),
              ),
            ),
            SliverToBoxAdapter(
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SizedBox(),
                    Text("Title"),
                    Row(
                      children: [
                        IconButton(
                          onPressed: () {
                            print("tapped");
                          },
                          icon: Icon(Icons.ac_unit),
                        )
                      ],
                    )
                  ],
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Container(
                    height: 722,
                    color: Colors.pinkAccent,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answered By – Yeasin Sheikh

Answer Checked By – Clifford M. (FlutterFixes Volunteer)