Flutter関連の学習したこと
miyaken122月下旬あたりから新しい職場でFlutterをやるようになり、
つらつらとどういう新しいことと学んだかつらつら備忘録として書いていきます
miyaken12アイコンの探し方
これはFlutterというよりAndroid関連のものになりそう
マテリアルアイコンの種類は豊富です
何かアイコンを自作する前にマテリアルデザインのアイコンをまず探した方がいいです (基本的にデザインスキルがないエンジニアであることを想定)
例えば、ログアウト機能がある画面を作った場合にその画面への導線としてログアウトのアイコンがないかと探す場合
コードで一発で探せれば
Icon(Icons.logout)
でもいいですが
もし見つからない場合はこのサイトでまず探すのが良さそう
↓
アイコン 検索サイト
アイコンの名称とIconsクラスのコードのstatic変数名は一緒なので
miyaken12パッケージ試してみた
カルーセルUIのやつ carousel_slider
基本 Readmeより
CarouselSlider(
options: CarouselOptions(height: 400.0),
items: [1,2,3,4,5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber
),
child: Text('text $i', style: TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
)
items・・・Widgetの配列を渡す
options・・・カルーセルの設定ができる アニメーションのインターバルとか
ListView.builder っぽくコンストラクタメソッドもある
※ 画像ファイル名のパスはFlutterGenを指定
class _InfoSliderView extends StatelessWidget {
final imageListForSlideView = [
Assets.resource.images.apexLog,
Assets.resource.images.apexLogBlack,
Assets.resource.images.apexLogWhite
];
@override
Widget build(BuildContext context) {
return CarouselSlider.builder(
itemCount: 3,
itemBuilder: (BuildContext context, int itemIndex, int realIndex) {
return Image(image: imageListForSlideView[itemIndex]);
},
options: CarouselOptions(
height: 190.0,
viewportFraction: 0.8,
initialPage: 0,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
),
);
}
}
itemCount・・・要素数
itemBuilder・・・実際に表示するWidgetを匿名関数で渡す
CarouselOptionsクラス
- スライドUIの高さ
- ページ番号の初期指定
- スライド間の余白
- 自動スライド
- 自動スライドのアニメーション間隔
などを指定できる(試したやつ)
miyaken12fvmの環境設定
※ macOS 10.15.7
まずは、Flutterのじゃないdartをインストール
$ brew tap dart-lang/dart
$ brew install dart
fvmをインストール
$ pub global activate fvm
fvmのパスを通す .bash_profile または .zshrc
export PATH="$PATH":"$HOME/.pub-cache/bin"
fvmのインストール確認
$ fvm --version
2.0.3
fvmでFlutterのバージョン切り替え
channel名またはバージョン名を指定してインストールできる
$ fvm install <バージョン>
例
$ fvm install stable
$ fvm install 2.0.4
インストール済みのバージョン一覧のコマンドで確認できる
$ fvm list
Cache Directory: /Users/(ホームディレクトリ)/fvm/versions
stable
2.0.4
fvmでインストールしたFlutterをデフォルトに設定する
$ fvm global <バージョン>
もしfvmじゃない通常のフローでインストールしたものがあった場合は以下のメッセージが出てくる
Flutter "2.0.4" has been set as global
However your "flutter" path current points to:
/Users/(ホームディレクトリ)/development/flutter/bin
to use global Flutter SDK through FVM you should change it to:
/Users/(ホームディレクトリ)/fvm/default/bin
なので .bash_profile または .zshrc のパスを書き換える
export PATH="$PATH:$HOME/development/flutter/bin"
↓
export PATH="$PATH":"$HOME/fvm/default/bin"
プロジェクトごとのFlutter バージョンの指定は以下
$ fvm use <バージョン名>
FlutterSDKのシンボリックリンクが生成されるのでリンクのは .gitignoreに入れて管理下から外す
# fvm
.fvm/flutter_sdk
エディタにfvmでインストールしたパスを通す(Android Studio)
Android Studio の prefrenseces > Languages & Frameworks -> Flutter でfvmインストールしたでインストールしたFlutterSDKのシンボリックリンクのパスを指定する
flutter sdk installation is incompleteなどのエラーが出る場合はFlutterの初期化？が必要なので
$ fvm flutter doctor
などをしてあげる
設定できたらAndroid Studioを再起動する
miyaken12オンボーディング
Flutter 2.0.4
パッケージ
dependencies:
flutter_form_builder: ^6.0.1
でインストール
使い方
以下のような感じで宣言してあげる
pageの配列もどこかで用意してあげる
画像ファイルのパスは手打ちめんどくさいので flutter_gen を使用
final _pages = <PageModel>[
PageModel(
color: Colors.white,
title: '',
imageAssetPath: Assets.resource.screen1.path,
body: '長いテキスト',
doAnimateImage: true,
),
PageModel(
color: Colors.white,
title: '',
imageAssetPath: Assets.resource.screen2.path,
body: '長いテキスト',
doAnimateImage: true,
),
PageModel(
color: Colors.white,
title: '',
imageAssetPath: Assets.resource.screen3.path,
body: '長いテキスト',
doAnimateImage: true,
),
PageModel(
color: Colors.white,
title: '',
imageAssetPath: Assets.resource.screen4.path,
body: '長いテキスト',
doAnimateImage: true,
),
PageModel(
color: Colors.white,
title: '',
imageAssetPath: Assets.resource.screen5.path,
body: '長いテキスト',
doAnimateImage: true,
),
];
Widget build(BuildContext context) {
return OverBoard(
pages: _pages,
skipText: 'スキップ',
nextText: '次へ',
finishText: 'トップ画面へ',
skipCallback: () {
// 画面遷移の処理
},
finishCallback: () {
// 画面遷移の処理
},
);
}
ボタンの種類
Flutter 2.0 以上
各新しいボタンのstyleという引数があるのでそのボタンクラスの〇〇.styleFormというNamedコンストラクタ を使ってボタンの色とか指定してあげるとよい
ElevatedButton・・・背景色ありのボタン
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(
height: 45.0,
),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.green,
),
child: Text(
'ElevatedButton',
style: TextStyle(color: Colors.white),
),
),
);
}
OutlinedButton・・・枠線+背景色透過ボタン
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(
height: 45.0,
),
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
primary: Colors.green,
side: const BorderSide(
color: Colors.green,
)),
child: const Text(
'OutlinedButton',
),
),
);
}
TextButton・・・テキストのみのボタン
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(
height: 45.0,
),
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
primary: Colors.green,
),
child: Text(
'TextButton',
),
),
);
}
スプラッシュ画面の実装
flutter_native_splashというパッケージで実現できる
インストール
dev_dependencies:
flutter_test:
sdk: flutter
flutter_native_splash: ^1.1.8+4
プロジェクトルート直下に flutter_native_splash.yamlというyamlファイルを配置する
記載はこんな感じ
flutter_native_splash:
color: "#ffffff" # 背景色
image: (スプラッシュ画面で使いたい画像) # 真ん中に配置される
web: false #プラットフォーム指定 ネイティブのみならwebをfalse
以下のコマンドを実行し成功してビルドすればスプラッシュ画面が出てくる
$ flutter pub run flutter_native_splash:create
Flutterで自作アイコンを使いたい
miyaken12文字を行数指定したい
Text(
subject,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13.0,
),
),
maxLines で行数指定
overflow: TextOverflow.ellipsis で ... にできる
miyaken12マテリアルカラーを作りたい
下記サイトでいい感じに作れてFlutter コードも生成できる