how to set title and subtitle at the bottom of App Bar in flutter

1,709

Result:

enter image description here

Code:

Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(150.0),
        child: AppBar(
          leading: IconButton(
            icon: Icon(Icons.arrow_back, color: Colors.black),
            onPressed: () {},
            //onPressed: () => Navigator.of(context).pop(),
          ),
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(30.0),
            child: Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'LOGIN',
                    style: TextStyle(color: Colors.black, fontSize: 16.0),
                  ),
                  Text(
                    'Enter your email and passowrd',
                    style: TextStyle(color: Colors.black, fontSize: 14.0),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    )
Share:
1,709
Mrunal
Author by

Mrunal

Apparently, this user prefers to keep an air of mystery about them.

Updated on December 27, 2022

Comments

  • Mrunal
    Mrunal over 1 year

    I am designing a sign in page in that, I wanted to show my title and subtitle at the bottom of App bar but not finding the proper way

    i used this code:

      @override
       Widget build(BuildContext context) {
       return Scaffold(
       appBar: PreferredSize(
       preferredSize: Size.fromHeight(150.0),
         child: AppBar(
            centerTitle: false,
            titleSpacing: 0.0,
            leading: IconButton(
              icon: Icon(Icons.arrow_back, color: Colors.black), onPressed: () {  },
              //onPressed: () => Navigator.of(context).pop(),
               ),  
           title: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'LOGIN',
              style: TextStyle(color: Colors.black, fontSize: 16.0),
            ),
            Text(
              'Enter your email and passowrd',
              style: TextStyle(color: Colors.black, fontSize: 14.0),
            )
          ],
        ),
      ],
    ),
    
  • Mrunal
    Mrunal over 3 years
    just perfect :) <3
  • Priyesh
    Priyesh over 3 years
    Welcome! Keep growing