回答:
次のiconThemeように、AppBarのプロパティを使用する必要があります。
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.black, //change your color here
),
title: Text("Sample"),
centerTitle: true,
),
または、戻るボタンを自分で処理したい場合。
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
title: Text("Sample"),
centerTitle: true,
),
さらに良いのは、戻るボタンの色を変更したい場合のみです。
appBar: AppBar(
leading: BackButton(
color: Colors.black
),
title: Text("Sample"),
centerTitle: true,
),
ParentPageと、appBarを一度追加でき、代わりにこれを使用できるすべての場所でScaffold
'leading'を使用して、デフォルトの戻る矢印を任意のウィジェットでオーバーライドすることもできます。
leading: new IconButton(
icon: new Icon(Icons.arrow_back, color: Colors.orange),
onPressed: () => Navigator.of(context).pop(),
),
AppBarウィジェットが行うのは、設定されていない場合、デフォルトの「先頭」ウィジェットを提供することだけです。
AppBaraModalRouteを押すと戻るボタンも表示されるため、完全には当てはまりません。
automaticallyImplyLeading: false、AppBarで設定します。
Navigator.of(context).pop();おかげで男
新しいボタンを作成して色を追加する方が簡単なようでした。疑問に思っている人のために、これをどのように行ったかを説明します。
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,
);
あなたがカスタマイズすることができAppBarWidgetを、キーワードでは重要であり、あるいは、あなたのカスタム割り当てることができAppBarWidgetをするアプリケーションバーののプロパティ足場：
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);
}
以下は、その使用方法の例です。
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'),
);
}
}
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.white, //modify arrow color from here..
),
);
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(),
),
),
),
)
先頭のアイコンをカスタマイズする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ミックスインとして使用するため、の既存のAppBarウィジェットの代わりとして使用できますScaffold。_buildLeadingWidget必要な場合にのみ戻るボタンを表示し、ドロワーが存在する場合はメニューボタンを表示し、全画面ダイアログが表示されている場合は閉じるボタンを表示する方法に注意してください。