Open5

あなたのFlutter(Dart)を少しでも綺麗なコードにしましょう。

いせりゅーいせりゅー

第2弾は、こちら

https://qiita.com/iseruuuuu/items/177d2a67bb7e4bfbd6b8

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弾は、こちら

https://qiita.com/iseruuuuu/items/a8eeb5a7e4c1bc54f86e

今回は、色を定数化することで、保守性の向上・パフォーマンスの向上など様々なメリットがあります。

使用例はこちらです。

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弾は、こちら

https://qiita.com/iseruuuuu/items/71b2d7310a5cfc1902a7

今回は、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弾は、こちら

https://qiita.com/iseruuuuu/items/eb10d52715f9f17e5df0

<b>今回は、ElevatedButton.styleFromEdgeInsetsStringを定数化することで、保守性の向上・パフォーマンスの向上など様々なメリットがあります。</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),
),