2月下旬あたりから新しい職場でFlutterをやるようになり、
つらつらとどういう新しいことと学んだかつらつら備忘録として書いていきます

miyaken12 2021/04/27に更新

アイコンの探し方

これはFlutterというよりAndroid関連のものになりそう

マテリアルアイコンの種類は豊富です
何かアイコンを自作する前にマテリアルデザインのアイコンをまず探した方がいいです (基本的にデザインスキルがないエンジニアであることを想定)

例えば、ログアウト機能がある画面を作った場合にその画面への導線としてログアウトのアイコンがないかと探す場合

コードで一発で探せれば

Icon(Icons.logout)

でもいいですが
もし見つからない場合はこのサイトでまず探すのが良さそう
↓
アイコン検索サイト

アイコンの名称とIconsクラスのコードのstatic変数名は一緒なので

miyaken12 2021/05/05に更新

パッケージ試してみた

カルーセル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の高さ
ページ番号の初期指定
スライド間の余白
自動スライド
自動スライドのアニメーション間隔
などを指定できる(試したやつ)

miyaken12 2021/05/05に更新

fvmの環境設定

※ 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 2021/05/31

オンボーディング

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,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return OverBoard(
      pages: _pages,
      skipText: 'スキップ',
      nextText: '次へ',
      finishText: 'トップ画面へ',
      skipCallback: () {
        // 画面遷移の処理
      },
      finishCallback: () {
         // 画面遷移の処理
      },
    );
  }

miyaken12 2021/05/31に更新

ボタンの種類

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',
        ),
      ),
    );
  }

miyaken12 2021/06/01

スプラッシュ画面の実装

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

miyaken12 2021/06/03

Flutterで自作アイコンを使いたい

https://www.fluttericon.com/

miyaken12 2021/06/10に更新

文字を行数指定したい

    Text(
      subject,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontSize: 13.0,
      ),
    ),

maxLines で行数指定
overflow: TextOverflow.ellipsis で ... にできる

miyaken12 2021/08/03

マテリアルカラーを作りたい

下記サイトでいい感じに作れてFlutter コードも生成できる