How to change the appBar back button color

前端 未结 9 630
慢半拍i
慢半拍i 2021-01-30 11:54

I cannot figure out how to change the appBar\'s automatic back button to a different color. it\'s under a scaffold and I\'ve tried to research it but I can\'t wrap my head aroun

相关标签:
9条回答
  • 2021-01-30 12:33

    It seemed to be easier to just create a new button and add color to it, heres how i did it for anyone wondering

    Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            leading: BackButton(
                color: Colors.black
            ),
    
    0 讨论(0)
  • 2021-01-30 12:34
    AppBar(        
        automaticallyImplyLeading: false,
        leading: Navigator.canPop(context)
            ? IconButton(
                icon: Icon(
                  Icons.arrow_back,
                  color: Colors.black,
                  size: 47,
                ),
                onPressed: () => Navigator.of(context).pop(),
              )
            : null,
    );
    
    0 讨论(0)
  • 2021-01-30 12:40

    To change the leading color for CupertinoPageScaffold

    Theme(
      data: Theme.of(context).copyWith(
        cupertinoOverrideTheme: CupertinoThemeData(
          scaffoldBackgroundColor: Colors.white70,
          primaryColor: Styles.green21D877, // HERE COLOR OF LEADING
        ),
      ),
      child: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          brightness: Brightness.light,
          backgroundColor: Colors.white,
          middle: Text('Cupertino App Bar'),
        ),
        child: Container(
          child: Center(
            child: CupertinoActivityIndicator(),
          ),
        ),
      ),
    )
    
    0 讨论(0)
  • 2021-01-30 12:47

    you can also override the default back arrow with a widget of your choice, via 'leading':

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

    all the AppBar widget does is provide a default 'leading' widget if it's not set.

    0 讨论(0)
  • 2021-01-30 12:48

    You can customize the AppBarWidget, keyword with is important, or you can assign your custom AppBarWidget to appBar property of Scaffold:

    import 'package:flutter/material.dart';
    
    double _getAppBarTitleWidth(
        double screenWidth, double leadingWidth, double tailWidth) {
      return (screenWidth - leadingWidth - tailWidth);
    }
    
    class AppBarWidget extends StatelessWidget with PreferredSizeWidget {
      AppBarWidget(
          {Key key,
          @required this.leadingChildren,
          @required this.tailChildren,
          @required this.title,
          this.leadingWidth: 110,
          this.tailWidth: 30})
          : super(key: key);
    
      final List<Widget> leadingChildren;
      final List<Widget> tailChildren;
      final String title;
      final double leadingWidth;
      final double tailWidth;
    
      @override
      Widget build(BuildContext context) {
        // Get screen size
        double _screenWidth = MediaQuery.of(context).size.width;
    
        // Get title size
        double _titleWidth =
            _getAppBarTitleWidth(_screenWidth, leadingWidth, tailWidth);
    
        double _offsetToRight = leadingWidth - tailWidth;
    
        return AppBar(
          title: Row(
            children: [
              Container(
                width: leadingWidth,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: leadingChildren,
                ),
              ),
              Container(
                color: Colors.green,
                width: _titleWidth,
                padding: const EdgeInsets.only(left: 5.0, right: 5),
                child: Container(
                  padding: EdgeInsets.only(right: _offsetToRight),
                  color: Colors.deepPurpleAccent,
                  child: Center(
                    child: Text('$title'),
                  ),
                ),
              ),
              Container(
                color: Colors.amber,
                width: tailWidth,
                child: Row(
                  children: tailChildren,
                ),
              )
            ],
          ),
          titleSpacing: 0.0,
        );
      }
    
      @override
      Size get preferredSize => Size.fromHeight(kToolbarHeight);
    }
    

    The following is the example about how to use it:

    import 'package:flutter/material.dart';
    import 'package:seal_note/ui/Detail/DetailWidget.dart';
    import 'package:seal_note/ui/ItemListWidget.dart';
    
    import 'Common/AppBarWidget.dart';
    import 'Detail/DetailPage.dart';
    
    class MasterDetailPage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _MasterDetailPageState();
    }
    
    class _MasterDetailPageState extends State<MasterDetailPage> {
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBarWidget(leadingChildren: [
            IconButton(
              icon: Icon(
                Icons.arrow_back_ios,
                color: Colors.white,
              ),
            ),
            Text(
              '文件夹',
              style: TextStyle(fontSize: 14.0),
            ),
          ], tailChildren: [
            Icon(Icons.book),
            Icon(Icons.hd),
          ], title: '英语知识',leadingWidth: 140,tailWidth: 50,),
          body: Text('I am body'),
        );
      }
    }
    
    0 讨论(0)
  • 2021-01-30 12:49

    You have to use the iconTheme property from the AppBar , like this:

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

    Or if you want to handle the back button by yourself.

    appBar: AppBar(
      leading: IconButton(
        icon: Icon(Icons.arrow_back, color: Colors.black),
        onPressed: () => Navigator.of(context).pop(),
      ), 
      title: Text("Sample"),
      centerTitle: true,
    ),
    

    Even better, only if you want to change the color of the back button.

    appBar: AppBar(
      leading: BackButton(
         color: Colors.black
       ), 
      title: Text("Sample"),
      centerTitle: true,
    ),
    
    0 讨论(0)
提交回复
热议问题