✨独自 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,
      ),
    );
  }
}

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.