flutter - 如何在flutter中设置App Bar底部的标题和副标题

Question

我正在设计一个登录页面，我想在应用栏底部显示我的标题和副标题，但找不到正确的方法

我使用了这段代码：

  @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

结果：

代码：

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

尝试使用这里的答案。您可以使用该类的bottom属性AppBar并在那里使用 PreferredSize 小部件。

Answer 3

可能不是最好的解决方案，但会起作用。

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