✨独自 AppBar - Ki-Kobayashi/flutter_wiki GitHub Wiki
🟩 独自 AppBarの作成
class BackWithTitleAppBar extends StatelessWidget
implements PreferredSizeWidget { 👈ここ忘れずに!
const BackWithTitleAppBar({
super.key,
required this.titleText,
required this.onBack,
});
final String titleText;
final VoidCallback onBack;
@override
Widget build(BuildContext context) {
final hasTitle = titleText != null;
return AppBar(
centerTitle: hasTitle ? true : null,
// タイトル
title: hasTitle ? _AppBarTitle(title: titleText!) : null,
leading: IconButton(
padding: EdgeInsets.zero,
constraints: const BoxConstraints(), 👈不要な余白の除去
onPressed: () {
onBack();
context.pop();
},
// Backボタン
icon: const SizedBox(
width: 72.0,
child: Row(
children: [
Icon(Icons.arrow_back_ios_new_sharp),
Text(
'Back',
style: TextStyle(
fontSize: 16.0,
color: Color(0xff0076e3),
height: 1.0,
),
),
],
),
),
),
leadingWidth: 65.0,
iconTheme: const IconThemeData(color: Color(0xff0076e3)),
);
}
// 👇以下を入れないとうまく機能しない
@override
Size get preferredSize =>
const Size(double.infinity, 45.0);
}
class _AppBarTitle extends StatelessWidget {
const _AppTitle({
required this.titleText,
});
final String titleText;
@override
Widget build(BuildContext context) {
return Text(
title,
style: const TextStyle(
fontSize: 17.0,
color: Colors.black,
fontWeight: FontWeight.w700,
height: 1.0,
),
);
}
}
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.