fluttertext-alignmentsliverappbar

FlexibleSpaceBar sub title text alignment


I am trying to have two text items in my FlexibleSpaceBar align left together. The problem is, the length of the first text item is adding padding to the second text item, pushing it to the right. So the longer the string is in the main title, the further out the sub title is displaying. Any help would be appreciated. Thank you

SliverAppBar(
          pinned: true,
          expandedHeight: 225.0,
          flexibleSpace: FlexibleSpaceBar(
            title: new Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('Main Title'),
                Text('Sub Title',
                  style: new TextStyle(fontSize: 10)),
              ],
            ),
            background: Image.asset(
              'assets/home_top.png',
              fit: BoxFit.fill,
            ),
          ),
        ),

enter image description here


Solution

  • you can add crossAxisAlignment: CrossAxisAlignment.start, under Column. Example :

    FlexibleSpaceBar(
       title: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const <Widget>[
            Text('Main Title'),
            Text('Sub Title', style: TextStyle(fontSize: 10)),
         ],
       ),
       background: Image.asset(
       'assets/home_top.png',
       fit: BoxFit.fill,
       ),
    ),