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
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
),
AppBar(
automaticallyImplyLeading: false,
leading: Navigator.canPop(context)
? IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
size: 47,
),
onPressed: () => Navigator.of(context).pop(),
)
: null,
);
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(),
),
),
),
)
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.
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'),
);
}
}
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,
),