Zenn
Open8

Flutterの気になったことをメモする

Flutter
gotogoto

FlutterCon2023周りで公開されている情報まとめ

ホームページ
https://fluttercon.dev/

公式アプリのリポジトリ
https://github.com/invertase/conference-app

セッションスライド

gotogoto

Switch文とSwitch式

書き方紛らわしい
https://dart.dev/language/patterns#switch-statements-and-expressions

switch文

switch (charCode) {
  case slash || star || plus || minus:      // 頭にcaseが必要
    token = operator(charCode);       // breakは必要なし
  case comma || semicolon:
    token = punctuation(charCode);
  case >= digit0 && <= digit9:
    token = number();
  default:                             // ワイルドカードは"default"か"_"
    throw FormatException('Invalid');    // continue, throw, returnが有効
}

switch式(式文の先頭では使えない)

token = switch (charCode) {
  slash || star || plus || minus => operator(charCode), // caseはつけずカンマ区切り
  comma || semicolon => punctuation(charCode),           // ":"ではなく"=>"
  >= digit0 && <= digit9 => number(),                     // 返すのは単一の式
  _ => throw FormatException('Invalid')                  // ワイルドカードは"_"のみ
};
gotogoto

Flutter 3.13で追加されたSliverたち

  • SliverMainAxisGroup/SliverCrossAxisGroup
    複数のSliverをまとめるもの
    MainAxis -> 縦
    CrossAxis -> 横

  • SliverCrossAxisExpanded
    Expanded同様，flexが指定できるSliver

  • SliverConstrainedCrossAxis
    子sliverの縦軸方向の幅を指定できるSliver

  • DecoratedSliver
    文字通りデコレーションできるSliver

公式サンプル
https://dartpad.dev/?id=6e2b7245063001576a3a83adb23f1121

gotogoto

NavigationRailのdestinationsの要素と同列になるようなtrailingの設定方法

class _NavigationRailTrailing extends StatelessWidget {
  const _NavigationRailTrailing({
    required this.nickname,
    required this.iconImageUrl,
    required this.onPressed,
  });

  final String nickname;
  final String iconImageUrl;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    final animation = NavigationRail.extendedAnimation(context);

    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Expanded(
          child: Container(
            alignment: Alignment.bottomLeft,
            padding: const EdgeInsets.only(
              bottom: 16,
            ),
            child: InkWell(
              onTap: onPressed,
              splashFactory: NoSplash.splashFactory,
              highlightColor: Colors.transparent,
              hoverColor: Colors.transparent,
              child: SizedBox(
                width: lerpDouble(24, 200, animation.value),
                child: Row(
                  children: [
                    const Icon(
                      Icons.account_circle,
                      size: 24,
                    ),
                    if (animation.value == 1) ...[
                      const SizedBox(
                        width: 28,
                      ),
                      Text(
                        nickname,
                        style: Theme.of(context).textTheme.labelMedium,
                      ),
                    ],
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}