如何更改appBar后退按钮的颜色

Question

我无法弄清楚如何将appBar的自动后退按钮更改为其他颜色.它在脚手架下,我试图研究它,但我无法绕过它.

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Image.asset(
          'images/.jpg',
          fit: BoxFit.fill,
        ),
        centerTitle: true,
      ),

Answer 1

您必须使用iconThemeAppBar中的属性,如下所示:

  appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.black, //change your color here
          ),
          title: Text("Sample"),
          centerTitle: true,
        ),
        body: Text("Sample body"),
      );

Answer 2

您还可以通过'lead'使用您选择的小部件覆盖默认的后退箭头：

leading: new IconButton(
  icon: new Icon(Icons.arrow_back, color: Colors.orange),
  onPressed: () => Navigator.of(context).pop(),
), 

如果未设置，则AppBar小部件所做的全部工作就是提供默认的“前导”小部件。

Answer 3

全局设置后退按钮颜色

MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.white,
          iconTheme: IconThemeData(color: Colors.black), // set backbutton color here which will reflect in all screens. 
        ),
      ),
      home: LoginScreen(),
    );

还，

改变SliverAppBar

 SliverAppBar(
            iconTheme: IconThemeData(
              color: Colors.white, //change your color here
            ),

Answer 4

您可以使用foregroundColor财产。例如：

AppBar(
    backgroundColor: Colors.white,
    foregroundColor: Colors.black,
    title: const Text('Black title and back icon on a white AppBar'),
  )

Answer 5

它似乎更容易创建一个新的按钮并添加颜色,这是我为任何想知道的人做的

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),

Answer 6

要自定义前导图标，您可能需要模仿小AppBar部件的功能，该小部件根据当前上下文正确处理显示后退按钮、抽屉图标或关闭图标。这是替换默认图标的示例。

import 'package:flutter/material.dart';

class TopBar extends StatelessWidget with PreferredSizeWidget {
  static const double _topBarHeight = 60;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      toolbarHeight: _topBarHeight,
      title: Text('Title'),
      automaticallyImplyLeading: false,
      leading: _buildLeadingWidget(context),
    );
  }

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

  Widget _buildLeadingWidget(BuildContext context) {
    final ScaffoldState scaffold = Scaffold.of(context);
    final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);

    final bool canPop = ModalRoute.of(context)?.canPop ?? false;
    final bool hasDrawer = scaffold?.hasDrawer ?? false;
    final bool useCloseButton = parentRoute is PageRoute<dynamic> && parentRoute.fullscreenDialog;

    Widget leading;
    if (hasDrawer) {
      leading = IconButton(
        icon: const Icon(Icons.menu_rounded),
        onPressed: Scaffold.of(context).openDrawer,
        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
      );
    } else {
      if (canPop) {
        if (useCloseButton) {
          leading = IconButton(
              color: Theme.of(context).colorScheme.onBackground,
              icon: Icon(Icons.close_rounded),
              onPressed: () => Navigator.of(context).maybePop());
        } else {
          leading = IconButton(
              padding: EdgeInsets.all(0),
              iconSize: 38,
              icon: Icon(Icons.chevron_left_rounded),
              onPressed: Navigator.of(context).pop);
        }
      }
    }

    return leading;
  }
}

此类使用PreferredSizeWidget作为 mixin，因此您可以使用它来AppBar替换Scaffold. 请注意该_buildLeadingWidget方法，该方法仅在必要时显示后退按钮，如果存在抽屉则显示菜单按钮，如果显示全屏对话框则显示关闭按钮。

Answer 7

您还可以为应用程序全局设置前导图标颜色

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(
        color: Colors.green
      )
    )
  )
)

Answer 8

在 AppBar 中，添加前导参数并分配 BackButton 小部件。然后将颜色参数添加到 BackButton 中，如下所示：

AppBar(
  leading: const BackButton(
    color: Colors.black, // Change the color here
  ),
  centerTitle: true,
)

Answer 9

AppBar(        
    automaticallyImplyLeading: false,
    leading: Navigator.canPop(context)
        ? IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
              size: 47,
            ),
            onPressed: () => Navigator.of(context).pop(),
          )
        : null,
);