如何在appbar flutter中居中圖像？

Question

我的應用欄中有一個圖像作為標題。 我希望它水平和垂直居中。 我可以設法將其水平居中，但無法在應用欄中垂直居中。 我嘗試了一些其他方法來實現這一點，並且在下面提供的實現中將它們作為注釋行

當前用戶界面：-

預期的用戶界面：-

執行 ：-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pan_asia_bank_app/screens/AccountSummary.dart';

class Login extends StatelessWidget{

  Widget _inputField(String title, Color border) {
    return TextField(
      decoration: InputDecoration(
        hintText: title,
        hintStyle: TextStyle(color: border),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
      ),
    );
  }

  Widget _buttons(name, BuildContext context){
    return Center(
        child: ButtonBar(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ButtonTheme(
                minWidth: 200,
                child:RaisedButton(
                  child: new Text(name),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                      side: BorderSide(color: Colors.white)
                  ),
                  color: Colors.white,
                  textColor: Colors.red,
                  onPressed: (){Navigator.push(context, MaterialPageRoute(builder: (context) => AccountSummary()));},
                )
            ),
          ],
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.red,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
//            title: Column(
//              mainAxisAlignment: MainAxisAlignment.center,
//              crossAxisAlignment: CrossAxisAlignment.center,
//
//              children: <Widget>[
//                Image.asset("assets/logo.png", fit: BoxFit.cover,),     <---------- Another way I tried
//              ]
//            )
            title: Image.asset("assets/logo.png", fit: BoxFit.cover, ),
            centerTitle: true,
          ),
        ),
      body: Column(
        children: [
          Container(
              margin: const EdgeInsets.only(top: 10),
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,

                    children: [
                      Container(
                        margin: const EdgeInsets.only(left: 25, top: 50, right: 25),
                        child:_inputField('UserName', Colors.white),
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: 25, top: 10, right: 25),
                        child: _inputField('Password', Colors.white),
                      ),
                      Container(
                        margin: const EdgeInsets.only( top: 15),
                        child: Text('Forgot Password?', style: TextStyle(color: Colors.white),),
                      ),
                      Container(
                        margin: const EdgeInsets.only( top: 25),
                        child: _buttons('Login', context),
                      ),
                    ],
                  )
              )
          ),
          Container(
            margin: const EdgeInsets.only(top: 80),
            child: Table(
              border: TableBorder(top: BorderSide(color: Colors.white, width: 4),
                                  verticalInside: BorderSide(color: Colors.white, width: 4),
                                  horizontalInside: BorderSide(color: Colors.white, width: 4)
              ),
              children: [
                TableRow(
                  children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ]
                ),
                TableRow(
                  children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ]
                )
              ],
            ),
          )
        ],
      )


    );
  }

}

Answer 1

您可以使用MediaQuery ，並添加 top-bottom padding/margin ，直到它vertically居中。 MediaQuery使用有助於在每個屏幕上給出相同的結果，因此您只需要查看它是否垂直居中

       PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            title: Container(   // <--- Change here
               padding: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height * 0.1) // <-- play with the double number
               child: Image.asset("assets/logo.png", fit: BoxFit.cover)
            ),
            centerTitle: true,
          )
        )

EdgeInset.symmetric(vertical: your_number) ，將處理底部頂部空間，這將使項目與中心對齊。 這是一個巧妙的解決方法，適用於每個屏幕。 確保僅使用MediaQuery 。

只要繼續在 MediaQuery 中使用小數或雙數就可以了。 請在此處閱讀有關MediaQuery 的信息。

Answer 2

我將分享另一種實現方式。
使用“flexibleSpace”而不是“title”，您可以實現您的要求。

這是我的代碼。
（我沒有資產，所以我做了一個簡單的帶有容器和邊框的標志）

appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            flexibleSpace: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 100, vertical: 5),
                  decoration: BoxDecoration(border: Border.all()),
                  child: Text('logo'),
                ),
              ],
            ),
            centerTitle: true,
          ),
        ),

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Login();
  }
}

class Login extends StatelessWidget {
  Widget _inputField(String title, Color border) {
    return TextField(
      decoration: InputDecoration(
        hintText: title,
        hintStyle: TextStyle(color: border),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
        border: UnderlineInputBorder(
          borderSide: BorderSide(color: border),
        ),
      ),
    );
  }

  Widget _buttons(name, BuildContext context) {
    return Center(
        child: ButtonBar(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        ButtonTheme(
            minWidth: 200,
            child: RaisedButton(
              child: new Text(name),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(100),
                side: BorderSide(color: Colors.white),
              ),
              color: Colors.white,
              textColor: Colors.red,
              onPressed: () {},
            )),
      ],
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.red,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150.0),
          child: AppBar(
            flexibleSpace: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 100, vertical: 5),
                  decoration: BoxDecoration(border: Border.all()),
                  child: Text('logo'),
                ),
              ],
            ),
            centerTitle: true,
          ),
        ),
        body: Column(
          children: [
            Container(
                margin: const EdgeInsets.only(top: 10),
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: SingleChildScrollView(
                    child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      margin:
                          const EdgeInsets.only(left: 25, top: 50, right: 25),
                      child: _inputField('UserName', Colors.white),
                    ),
                    Container(
                      margin:
                          const EdgeInsets.only(left: 25, top: 10, right: 25),
                      child: _inputField('Password', Colors.white),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 15),
                      child: Text(
                        'Forgot Password?',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 25),
                      child: _buttons('Login', context),
                    ),
                  ],
                ))),
            Container(
              margin: const EdgeInsets.only(top: 80),
              child: Table(
                border: TableBorder(
                    top: BorderSide(color: Colors.white, width: 4),
                    verticalInside: BorderSide(color: Colors.white, width: 4),
                    horizontalInside:
                        BorderSide(color: Colors.white, width: 4)),
                children: [
                  TableRow(children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ]),
                  TableRow(children: [
                    Icon(Icons.account_circle),
                    Icon(Icons.access_alarm)
                  ])
                ],
              ),
            )
          ],
        ));
  }
}