公式サイト

解説を要約して理解してみよう

Avoid relative imports for files in lib/.

lib/の中にあるファイルで相対インポートを避ける（翻訳）

Flutterを作成した際に、以下のようなフォルダーになると思います。（人によって作られるフォルダが変わります）

.dart.tool
.idea
android
build
ios
lib　//☜これ！
test

...その他

lib/内での相対インポートと絶対インポートを混合すると、2つの異なる方法でインポートされるため、混乱が生じる可能性があります。これを回避する1つの方法は、ディレクトリ内のファイルに対して絶対インポートを一貫して使用することです。

このルールは Dart 2.10.0 以降で利用可能です。

ここで相対インポート？？となる方がいるかなと思います。ちゃんと以下で解説しますよ👌

相対インポートとは

インポートには「絶対インポート」と「相対インポート」の2つがあります。

絶対インポート (Absolute Import)

インポートする際に、完全なパスを使用する方法
例えば、package:プレフィックスを使ってパッケージから直接インポートする場合などがこれに該当します。
Dartパッケージの外部からのインポートや、アプリケーションのルートからの絶対パスを使用する場合に役立ちます。
インポートされるファイルの場所が変わっても、インポート文自体の変更は不要です。

相対インポート (Relative Import)

インポートする際に、現在のファイルに対する相対的なパスを使用します。
「.」や「..」などの相対パス記法を使用する。
同じパッケージ内や隣接するディレクトリ内のファイルをインポートする際に便利です。
ただし、ファイルの場所が変わると、インポート文も変更する必要があります。

どちらもメリットとデメリットがありますが、FlutterやDartのコミュニティでは、特に大規模なプロジェクトでは、絶対インポートを使用することが推奨されている場合が多いです。絶対インポートを使用すると、ファイル構造の変更があった際に、インポートの修正が少なく済むため、保守性が向上します。

コードから理解してみよう

フォルダ構成

フォルダー構造について一部を省略しています。

・
├── android
├── ios
├── lib
│   ├── main.dart
│   ├── my_home_page.dart
├── test
├── analysis_options.yaml

analysis_options.yamlに以下の記載を行います。もっと追加したほうがいいとは思いますが、今回は、 always_use_package_importsを理解するために一つだけの記載になっています。

analysis_options.yaml


include: package:flutter_lints/flutter.yaml

linter:
  rules:
    - always_use_package_imports

my_home_page.dart


import 'package:flutter/material.dart';

//相対パス→これだと
import '../my_home_page.dart';

//絶対パス
import 'package:always_use_package_imports/my_home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

my_home_page.dart

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

相対importを使用すると、以下のwarningが出現します。

この場合では、「Convert to 'package: import'」のボタンを教えていただけると自動で修正してくれます。重大なエラーやwarningではないとは思いますが、いいコード書くためにはとても大切であると僕は思います。

【Flutter】 always_use_package_importsを理解する