🛃
genってフォルダとは?
読んでほしい人
- よくみるgenってフォルダがわからない?
- 自動生成のツールに興味がある
記事の内容
最近よくみるgenってフォルダが画像とかのパスを自動生成してくれるパッケージらしく気になって使ってみることにしました。
昔からあるパッケージもありますが私使ってないですね笑:
これが今回使うパッケージ!
アセット、フォント、色などの Flutter コード ジェネレーター — すべての文字列ベースの API を削除します。
アセット パス文字列を直接使用するのは安全ではありません。
# pubspec.yaml
flutter:
assets:
- assets/images/profile.jpg
❌ Bad
タイプミスをした場合はどうなりますか?
Widget build(BuildContext context) {
return Image.asset('assets/images/profile.jpeg');
}
// The following assertion was thrown resolving an image codec:
// Unable to load asset: assets/images/profile.jpeg
⭕️ Good
We want to use it safely.
Widget build(BuildContext context) {
return Assets.images.profile.image();
}
🎁Installation
どうやらインストールしないと使えないらしい?
Homebrew
Works with macOS and Linux.
brew install FlutterGen/tap/fluttergen
Pub Global
Works with macOS, Linux and Windows.
dart pub global activate flutter_gen
📄yamlファイルの解説と使い方
アセット パス文字列を直接使用するのは安全ではありません。
パスを設定する必要がある場合があります。
build_runner の一部として
- build_runner と FlutterGen をパッケージの pubspec.yaml ファイルに追加します:
dev_dependencies:
build_runner:
flutter_gen_runner:
- FlutterGenをインストールする
flutter pub get
- FlutterGenを使用する
dart run build_runner build
🪛使用方法
pubspec.yaml を構成した後、fluttergen を実行します。pubspec.yamlは、プロジェクト直下にあるので、./pubspec.yamlで実行する。
fluttergen -h
fluttergen -c ./pubspec.yaml
⚙️設定ファイル
FlutterGen は、pubspec.yaml のキー flutter と flutter_gen に基づいて dart ファイルを生成します。
デフォルトの構成はここにあります。
# pubspec.yaml
# ...
flutter_gen:
output: lib/gen/ # Optional (default: lib/gen/)
line_length: 80 # Optional (default: 80)
# Optional
integrations:
flutter_svg: true
flare_flutter: true
rive: true
lottie: true
colors:
inputs:
- assets/color/colors.xml
flutter:
uses-material-design: true
assets:
- assets/images/
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Italic.ttf
style: italic
公式の解説が長く続くので、これぐらいにして、使い方としては、決まった設定をすればパスを指定しなくても画像、svg、フォントを読み込んでくれるらしい。パスを指定せずにFlutterのWidgetで呼び出せる便利なツールらしい?
このパッケージも追加して使ってみよう!
今回は、画像とGoogleFontsを使ってみましょう!
png画像を用意する。
GoogleFontsの公式はこちら⬇️
assetsディレクトリの中に、imagesディレクトリとfontsディレクトリを作成する。
yamlファイルはこのように設定します
name: gen_example
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: '>=3.1.3 <4.0.0'
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_gen: ^5.4.0
build_runner: ^2.4.7
# 公式と同じ場所に配置する
flutter_gen:
output: lib/gen/
line_length: 80
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
# assets/images/ディレクトリの画像のパスを指定する.
- assets/images/orechan.png
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
fonts:
- family: Dancing # 名前はGoogleFontsに合わせるみたい。自動生成されると小文字で表示される
# assets/fonts/fontsディレクトリのパスを指定する.
fonts:
- asset: assets/fonts/DancingScript-Bold.ttf
- asset: assets/fonts/DancingScript-Medium.ttf
- asset: assets/fonts/DancingScript-Regular.ttf
- asset: assets/fonts/DancingScript-SemiBold.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
- FlutterGenをインストールする
flutter pub get
- FlutterGenを使用する
dart run build_runner build
libディレクトリにgenディレクトリと自動生成されたファイルが作られれば成功です!
GoogleFontsの設定が選べないのが理解できなかった???
設定が足りなかったのかも...
サンプルコード
import 'package:flutter/material.dart';
import 'package:gen_example/gen/assets.gen.dart';
import 'package:gen_example/gen/fonts.gen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
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'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
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>[
// image.assetは使わない.
Assets.images.orechan.image(// パラメーターを指定すると画像のサイズを変更できる.
width: 50,
height: 50,
),
const Text(
'You have pushed the button this many times:',
),
// TextウイジェットにFontFamily.dancingを適用するにはこのように書く.
Text(
'Flutter Gen',
style: TextStyle(
fontFamily: FontFamily.dancing,
fontSize: 30,
)
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
最後に
今回は、最近よくみるgenってディレクトリがなんなのか調べてみました!
画像やフォントを使いやすくしてくれるツールがあるなんてびっくりしましたね。このパッケージはあの有名なwasabeefさんが作っているようです。知らなかった...
まさか国産のパッケージだったとは!
Githubのサンプルコードはこちら⬇️
Discussion