Closed9
Flutter2からFlutter3に更新する
今開発中のFlutter製アプリを先日発表されたFlutter 3にアップデートしてみます。
更新内容は以下のリンクを参考にします。
主な変更点
- MacアプリやLinuxアプリに対応した
- Material 3(マテリアルデザインのバージョン3)に対応した
- Linterなどのツールの更新
$ flutter upgrade
Upgrading Flutter to 3.0.0 from 2.10.5 in /usr/local/bin/flutter...
...
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 13.3)
! CocoaPods 1.10.1 out of date (1.11.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.67.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
! Doctor found issues in 1 category.
flutter doctorで1個警告がでたので、以下を実行したら、無事警告は消えた。
sudo gem install cocoapods
を参考に以下のコマンドを実行。
flutter pub upgrade
flutter pub upgrade --major-versions flutter_lints
dart fix --dry-run
dart fix --apply
dart fix —-applyの-が微妙に違うみたいです。
正しくはこちら↓
dart fix --apply
ご指摘ありがとうございます!
修正しました。
dart fix --apply
で自動修正できなかった部分を修正。
例えば私のアプリの場合、以下のエラーが出たので修正。
Do not use BuildContexts across async gaps. dart(use_build_context_synchronously)
onTap: () async {
List locations = await locationFromAddress(
_searchResult[index]
.description
.toString());
LatLng location = LatLng(
locations.first.latitude,
locations.first.longitude);
+ if (!mounted) return;
Navigator.pop(context, location);
},
ThemeDataに useMaterial3フラグを追加してみる。
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
useMaterial3: true,
),
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('ja'),
],
home: const HomePage(),
);
}
}
Before
After
気づいた変更点
- FloatingActionButton の形状が変化
- 下タブ押したときのエフェクトがおしゃれな感じになった
このスクラップは2022/05/13にクローズされました