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

Question

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),
        )
      ],
    ),
  ],
),

Answer 1

Result:

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),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    )

Answer 2

Try using the answer over here. You can use the bottom property of the AppBar class and use the PreferredSize widget over there.

Answer 3

may not be the best solution but will work.

return Scaffold(
    appBar: AppBar(
      elevation: 0.0,
      backgroundColor: Colors.grey[100],
    ),
    body: Column(
      children: [
        Container(
          color: Colors.grey[100],
          padding: EdgeInsets.only(left: 20,top: 150),
          child: 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),
              )
            ],
          ),
        ),
        //over here add your rest of the body content
      ],
    ),
  );