💨

Flutter: インポートをすっきりさせて綺麗にする方法

に公開
Flutter
tech

はじめに

説明

タイトル通り、インポートをスッキリ綺麗にさせる方法について説明します。
今回、3つの方法をお伝えします。
例えば、このようなインポートがあったとして、

import 'package:flutter/material.dart';
import 'package:hogehoge/views/screens/customer/components/customer_list_item.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hogehoge/views/screens/customer/components/customer_header.dart';
import 'package:hogehoge/constants/app_colors.dart';
import 'package:hogehoge/views/screens/customer/components/customer_body.dart';
import 'package:hogehoge/constants/app_text_styles.dart';
import 'package:hogehoge/views/widgets/section_container.dart';
import 'package:hogehoge/views/widgets/labeled_text_field.dart';
import 'package:hogehoge/views/widgets/section_header.dart';
import 'package:hogehoge/views/widgets/date_text.dart';
import 'package:hogehoge/views/widgets/refresh_indicator_wrapper.dart';
import 'package:hogehoge/views/widgets/sort_button.dart';
import 'package:hogehoge/constants/app_execute_button.dart';
import 'package:hogehoge/constants/app_theme.dart';

こんな感じで綺麗に！！なります！

// Dart imports:
import 'dart:async';

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:gap/gap.dart';

// Project imports:
import 'package:hogehoge/constants/constants_barrel.dart';
import 'package:hogehoge/views/screens/customer/customer_barrel.dart';
import 'package:hogehoge/views/widgets/widgets_barrel.dart';

では早速やっていきます。

本題

1. インポート整形の設定方法

analysis_options.yamlでLintルールの設定します。

# インポートは絶対パスを推奨（相対パスでインポートすると警告が出る）
always_use_package_imports: true 

# インポート順序を強制
directives_ordering: true
  • 機能：インポート文の順序が正しいかをチェック
  • 動作：順序が間違っている場合に警告を表示（自動修正はしない）
  • 特徴：Dartの標準的なスタイルガイドに従った順序をチェック

2. pubspec.yamlにimport_sorterパッケージの追加

import_sorterパッケージ以外にも類似のものはあると思いますが、私はずっとこれを使っています！

https://pub.dev/packages/import_sorter

  • 機能：インポート文を自動的に整理・並べ替え・グループ化
  • 動作：ファイル保存時やコマンド実行時に実際にコードを書き換え
  • 特徴：
    • インポートをカテゴリ別にグループ化（Dart, Flutter, Package, Project）
    • 各グループの前にコメントを追加
    • アルファベット順に並べ替え
    • 未使用のインポートを削除

3. バレルファイルの活用

バレルファイルを使用すると、複数のコンポーネントを一つのファイルからエクスポートでき、インポート文を大幅に簡略化できます。
私は普段、個人開発でこのようなディレクトリ構造で各メイン画面のフォルダに1つバレルファイルを作ってます。
他のコンポーネントから参照する際、このバレルファイルを読み込む事でインポートがスッキリします。

// （例）order_barrel.dart
export 'components/order_appbar.dart';
export 'components/order_body.dart';
export 'components/order_header.dart';
export 'components/order_list_item.dart';
export 'new_order/new_order_page.dart';
export 'order_detail/order_detail_page.dart';

全体的な before / after

before

import 'package:flutter/material.dart';
import 'package:hogehoge/views/screens/customer/components/customer_list_item.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:hogehoge/views/screens/customer/components/customer_header.dart';
import 'package:hogehoge/constants/app_colors.dart';
import 'package:hogehoge/views/screens/customer/components/customer_body.dart';
import 'package:hogehoge/constants/app_text_styles.dart';
import 'package:hogehoge/views/widgets/section_container.dart';
import 'package:hogehoge/views/widgets/labeled_text_field.dart';
import 'package:hogehoge/views/widgets/section_header.dart';
import 'package:hogehoge/views/widgets/date_text.dart';
import 'package:hogehoge/views/widgets/refresh_indicator_wrapper.dart';
import 'package:hogehoge/views/widgets/sort_button.dart';
import 'package:hogehoge/constants/app_execute_button.dart';
import 'package:hogehoge/constants/app_theme.dart';

after

// Dart imports:
import 'dart:async';

// Flutter imports:
import 'package:flutter/material.dart';

// Package imports:
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:gap/gap.dart';

// Project imports:
import 'package:hogehoge/constants/constants_barrel.dart';
import 'package:hogehoge/views/screens/customer/customer_barrel.dart';
import 'package:hogehoge/views/widgets/widgets_barrel.dart';

すっきり綺麗になりましたね。
1~3全部をやらなくてもどれか1つでも問題はありません。
もしまだ何もしてないよって方はこの機会にインポートを綺麗にしてみては如何でしょうか？

Discussion