如何居中AppBar以及如何减小PrefrerredSize中的前导图标大小?

时间:2019-07-25 08:53:44

标签: flutter dart

如何将整个AppBar居中以及如何减少前导图标?

我尝试使用Center小部件和Column使用mainAxisAlignment.center无效。 我尝试将widthheight添加到主要的图标容器中,但是没有任何作用

appBar: PreferredSize(
    child: AppBar(
        leading: Container(
            decoration: BoxDecoration(..),
            child: Icon(..),
        ),
        title: TextFormField(
            ...
        ),
        actions: <Widget>[
            Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Text(
                        ...
                    ),
                    CupertinoSwitch(
                        ...
                    )
                ],
            )
        ],
    ),
preferredSize: Size.fromHeight(80.0)),

As shown here.

1 个答案:

答案 0 :(得分:1)

作为选择

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AwesomeAppBar(height: 80),
      ),
    );
  }
}

class AwesomeAppBar extends PreferredSize {
  final double height;

  const AwesomeAppBar({Key key, @required this.height});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, snapshot) {
      return Container(
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
        height: height,
        color: Theme.of(context).primaryColor,
        child: Row(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(16),
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
            Expanded(
              child: Container(
                height: 32,
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.symmetric(horizontal: 16),
                margin: EdgeInsets.only(right: 16),
                decoration: ShapeDecoration(
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
                  color: Colors.white,
                ),
                child: Text('Search'),
              ),
            ),
            SwitchWithText(),
            SizedBox(width: 16),
          ],
        ),
      );
    });
  }

  @override
  Size get preferredSize => Size.fromHeight(height);
}

class SwitchWithText extends StatefulWidget {
  @override
  _SwitchWithTextState createState() => _SwitchWithTextState();
}

class _SwitchWithTextState extends State<SwitchWithText> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Text('Online', style: TextStyle(color: Colors.white)),
        CupertinoSwitch(
          value: true,
          onChanged: (b) {},
          activeColor: Colors.lightBlueAccent,
        ),
      ],
    );
  }
}

enter image description here