Open5
あなたのFlutter(Dart)を少しでも綺麗なコードにしましょう。
Qiitaで書いた記事をたくさん投稿していきます。
簡素に要約をします。
第一弾は、こちら
flutter analyze
これを使うことでerrorやwaringがどこにあるのかを確認することができます。
開発がひと段落した後にやるといいかもです。
第2弾は、こちら
import_sortというPackageを使うだけで、importの整理をすることができます。
dev_dependencies:
flutter_test:
sdk: flutter
import_sorter: ^4.6.0
からの
flutter pub run import_sorter:main
Before
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/physics.dart';
import 'package:flutter/painting.dart';
import 'package:intl/intl.dart';
import 'package:mdi/mdi.dart';
import 'package:provider/provider.dart';
import 'anotherFile.dart';
import 'package:example_app/anotherFile2.dart';
import 'dart:async';
import 'dart:io';
import 'dart:js';
After
// Dart imports:
import 'dart:async';
import 'dart:io';
import 'dart:js';
// Flutter imports:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/physics.dart';
// Package imports:
import 'package:intl/intl.dart';
import 'package:mdi/mdi.dart';
import 'package:provider/provider.dart';
// Project imports:
import 'package:example_app/anotherFile2.dart';
import 'anotherFile.dart';
利点としては、
・インポートの順序が一貫しているため、コードが読みやすくなり、保守が容易になる。
・インポートの順序が一貫しているため、チームで作業する際にマージの競合が発生する可能性が低くなる。
・必要なインポートを見つけるために必要な時間が短縮される。
・類似のインポートをグループ化することによって、コードをより読みやすくなる。
・1つのファイルに多数のimportが存在することによる混乱を軽減できる。
第3弾は、こちら
今回は、色を定数化することで、保守性の向上・パフォーマンスの向上など様々なメリットがあります。
使用例はこちらです。
import 'package:flutter/material.dart';
class ColorConstants {
static Color backgroundColor = const Color(0xFFF2F2F7);
static Color lightBlue = Colors.lightBlue;
}
画面にはこのようにして使用します。
Text(
'以下の通りに使います〜!',
style: TextStyle(color: ColorConstants.lightBlue),
),
第4弾は、こちら
今回は、TextStyleを定数化することで、保守性の向上・パフォーマンスの向上など様々なメリットがあります。
使用例
import 'package:flutter/material.dart';
class StyleConstant {
static TextStyle blackTextStyle = const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 18,
color: Colors.black,
);
}
画面にはこのようにして使用します。
Text(
'styleがとてもスッキリしていますね。',
style: StyleConstant.blackTextStyle,
),
第5弾は、こちら
<b>今回は、ElevatedButton.styleFrom
・EdgeInsets
・String
を定数化することで、保守性の向上・パフォーマンスの向上など様々なメリットがあります。</b>
使用例
import 'package:flutter/material.dart';
class StyleConstant {
static ButtonStyle buttonStyle = ElevatedButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.yellow,
fixedSize: const Size(250, 100),
side: const BorderSide(
color: Colors.black,
width: 3,
),
);
static EdgeInsets textPadding = const EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
);
static String buttonText = 'tap';
}
画面にはこのようにして使用します。
Padding(
padding: StyleConstant.textPadding,
child: Text('とてもスッキリ'),
),
ElevatedButton(
onPressed: () {},
style: StyleConstant.buttonStyle,
child: Text(StyleConstant.buttonText),
),