私が使用しているflutterを3.13から3.16にバージョンアップしたら、こんな感じにデザインがおかしくなりました。
![](https://fukugyou-log.com/wp-content/uploads/2024/01/Screenshot_1706515836.png)
目次
原因
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