CODEWITHSUNDEEP
flutterdartflutter-layout
mr.incredible
mr.incredible

Reputation: 4185

Flutter: sliberAppBar stick icon to bottom

I am tired of experimenting with layout.. I just can't find the way how to align menu icon to the bottom of sliverAppBar. It should stick to the bottom permanently while sliverAppBar is being resized.

enter image description here

SliverAppBar(
  expandedHeight: 200.0,
  floating: false,
  pinned: true,
  elevation: 0.0,
  /*leading: Column( // <-- icon positioned in the upper section of appBar
    mainAxisAlignment: MainAxisAlignment.end,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Icon(Icons.menu, size: 40,)
    ],
  ),*/
  flexibleSpace: SafeArea(child:
    FlexibleSpaceBar(
      background: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(
            'assets/images/store.png',
            fit: BoxFit.cover,
            width: 120,
            height: 120,
          )
        ],
      ),
      title: Row( // <-- hides icon when appBar is spreaded out
        children: <Widget>[
          Icon(Icons.menu, size: 40, color: Colors.white,)
        ],
      ),
    )
  )
),

None of these approaches work as I expected.

I just want to align this icon permanently to the left bottom corner of the appBar. I don't want to hide icon when appBar reveals also I don't want to leave it in the upper section of appBar. How to fix it?

Upvotes: 1

Views: 583

Answers (2)

nmanikiran
nmanikiran

Reputation: 3148

Place the menu icon at the title. by default SliverAppBar title has a padding of EdgeInsetsDirectional.only(start: 72, bottom: 16) so change it to EdgeInsetsDirectional.only(start: 16, bottom: 16) then it will look something like below

enter image description here

  SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              elevation: 0.0,
              flexibleSpace: SafeArea(
                  child: FlexibleSpaceBar(
                background: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [FlutterLogo(size: 100.0,)],
                ),
               titlePadding: EdgeInsetsDirectional.only(start: 16, bottom: 16),
               title: Icon(
                      Icons.menu,
                      size: 40,
                      color: Colors.white,
                  )
          ))),

Upvotes: 1

SilenceCodder
SilenceCodder

Reputation: 3174

Use action parameter inside SliverAppBar, After that you can design the way you want with action parameter E.g

SliverAppBar(
          expandedHeight: 180.0,
          backgroundColor: mytheme.Colors.primaryColor,
          actions: <Widget>[

               ],
        ),

Upvotes: 1

Related Questions