Closed9

Flutter2からFlutter3に更新する

Hiroki SakanoHiroki Sakano

主な変更点

  • MacアプリやLinuxアプリに対応した
  • Material 3(マテリアルデザインのバージョン3)に対応した
  • Linterなどのツールの更新
Hiroki SakanoHiroki Sakano
$ 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
Hiroki SakanoHiroki Sakano

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);
},
Hiroki SakanoHiroki Sakano

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(),
    );
  }
}
Hiroki SakanoHiroki Sakano

Before

Before

After

After

気づいた変更点

  • FloatingActionButton の形状が変化
  • 下タブ押したときのエフェクトがおしゃれな感じになった
このスクラップは2022/05/13にクローズされました