Flutter アプリ

【Flutter】3.16にバージョンアップしたら、画面デザインがおかしくなった件

私が使用しているflutterを3.13から3.16にバージョンアップしたら、こんな感じにデザインがおかしくなりました。

原因

3.16リリース以前では、「オプトイン」の手順として、useMaterial3テーマフラグを使用していました。しかし、このリリースからは、デフォルトでuseMaterial3がtrueに設定されます。Material 2は最終的に非推奨とされ、将来的には削除される予定ですが、本記事ではuseMaterial3の無効方法をお伝えします。

対処方法

MaterialライブラリのM3バージョンを無効にするには、MaterialAppテーマでuseMaterial3: falseを指定します。ThemeDataのプロパティにuseMaterial3: falseと書く事で元の状態に戻ります。

Dart
// lib/main.dart
import 'dart:io';
import 'package:flutter/material.dart';
// ...
class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Favorites>(
      create: (context) => myData,
      child: MaterialApp(
        // Hide the debug banner
        debugShowCheckedModeBanner: false,
        title: 'ポケット名言',
        localizationsDelegates: const [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale("ja", "JP"),
      ],
        theme: ThemeData(
          primarySwatch: Colors.lime,
          useMaterial3: false, // 追記
        ),

開発環境

PowerShell
> flutter --version
Flutter 3.16.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 78666c8dc5 (6 weeks ago) • 2023-12-19 16:14:14 -0800
Engine • revision 3f3e560236
Tools • Dart 3.2.3 • DevTools 2.28.4

-Flutter, アプリ