FlutterでlargeTitleのTextをカスタマイズする

Themeを作成

custom_theme.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CustomTheme {

  CustomTheme._();

  static final ThemeData customLightThemeData = ThemeData.light().copyWith(
    cupertinoOverrideTheme: CupertinoThemeData().copyWith(
      textTheme: CupertinoTextThemeData().copyWith(

        // LargeTitleのstyle設定
        navLargeTitleTextStyle: CupertinoTextThemeData().navLargeTitleTextStyle.copyWith(
          color: Colors.green
        ),
        // LargeTitleではなくなったときの設定
        navTitleTextStyle: CupertinoTextThemeData().navTitleTextStyle.copyWith(
          color: Colors.red,
        )
      )
    ),
  );
}

MaterialAppに適応させる

main.dart

import 'package:flutter/material.dart';


class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: CustomTheme.customLightThemeData,
      home: HogePage()
    );
  }
}

LargeTitleを付けたいViewを作成

LargeTitleのTextWidgetにはstyleをつけてはいけない。
styleをつけると、そのstyleが固定されてしまい、小さくならなくなる。

hoge_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class HogePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          CupertinoSliverNavigationBar(
            largeTitle: Text(
              'ホーム',
            ),
          )
        ],
      ),
    );
  }
}