現場で使える Flutter開発入門の3-8までの不明点を調べた

現場で使える Flutter開発入門の3-3までの不明点を調べた
の続編

現場で使える Flutter開発入門の3-4から3-8までの不明点を調べた
調べたことを備忘録で記載する

Dartの構文
・アロー演算子
returnだけの場合に使える
void main() => runApp(const MyApp());

・Mixins
class B with A {}※Aは基本的にmixinクラス
https://zenn.dev/iwaku/articles/2020-12-16-iwaku

・late
kotlinのlateinit

・toStringAsFixed
value.toStringAsFixed(2)
で小数点二桁

・ダブルドット
..addListener
同一オブジェクトに対して、複数の操作をする際に使う記法
https://qiita.com/Nedward/items/b71512f8c2997f52697d

・non-null
!つけるとnon-nullにキャストできる

UI系
・ElevatedButton.styleFrom
ElevatedButtonのスタイルを設定する。

・ElevatedButtonの色
primaryが背景色、onPrimaryが押したときの背景色になります。
https://qiita.com/piyonakajima/items/e0daab01da392bebb596

・FractionallySizedBox
幅を比率で指定するやつ
A widget that sizes its child to a fraction of the total available space
https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html

・SafeArea
Scaffoldのbodyの一番最初に囲う。
https://note.com/kuromamei/n/n52927e26047c

・Expanded
UIを幅いっぱいに広げたい時に使う。
https://qiita.com/nannany_hey/items/d4114f615e4d53964121

・SingleChildScrollView + Expandedは相性が悪い
スクロールビューの中にExpanededを入れると高さが固定できないので以下のエラーが出る。
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
https://qiita.com/qst_exe/items/2e37301ad56b35cb4bd6

・tabularFigures
FontFeature.tabularFigures
等幅フォント

・BorderRadius
角丸

状態系
・StatefulとStateless
書き方に違いがある。

class TweenStaggeredPage extends StatefulWidget {
  const TweenStaggeredPage({Key? key}) : super(key: key);

  @override
  _TweenStaggeredPageState createState() => _TweenStaggeredPageState();
}

class _TweenStaggeredPageState extends State<TweenStaggeredPage> {

}

// stateless
class TransitionPage extends StatelessWidget {
  const TransitionPage({Key? key}) : super(key: key);
}

・状態管理
StatefulWidgetは状態ごとにメソッドが呼ばれる。
https://qiita.com/kurun_pan/items/116288b8ab2c409d2ee5

アニメーション
・画面遷移
Navigator.ofでできる

そのときにSlideTransitionをつけるとアニメーションがつく
https://www.choge-blog.com/programming/flutter-slide-animation/

・Tween
Tween ベースのアニメーションは、開始点から終了点までの状態を表現するアニメーションです。たとえば赤色から青色に変化するアニメーションや、座標0から100まで移動するアニメーションのことです。
https://webbibouroku.com/Blog/Article/flutter-animation-basic

・SharedAxisTransition
そのままだと使えないのでimportする。
package:animations/animations.dart
これを使うために、pubspecにanimationsを入れる必要がある
Defines a transition in which outgoing and incoming elements share a fade transition.
https://pub.dev/documentation/animations/latest/animations/SharedAxisTransition-class.html

・PageTransitionSwitcher
viewの切り替えに設定するアニメーション
https://pub.dev/documentation/animations/latest/animations/PageTransitionSwitcher-class.html

・AnimationController
AnimationController.valueは0.0-1.0までのアニメーションの時間を返却する。
https://nzigen.com/reference/flutter/2018-04-30-animation/

・Interval
以下のコードは以下の順番動く
https://qiita.com/noby111/items/22cc2a199e4f6a89db8a
0〜0.3が_height
0.3〜0.6がcolor
0.6〜1.0がborder

_height = _animationController
    .drive(CurveTween(curve: const Interval(0, 0.3)))
    .drive(Tween(begin: 0, end: 200));

_color = _animationController
    .drive(CurveTween(curve: const Interval(0.3, 0.6)))
    .drive(ColorTween(begin: Colors.blue, end: Colors.amber));

_borderRadius = _animationController
    .drive(CurveTween(curve: const Interval(0.6, 1.0)))
    .drive(BorderRadiusTween(
        begin: BorderRadius.circular(0), end: BorderRadius.circular(75.0)));

・アニメーションのエラー
以下のエラーが出る。
色の指定もアニメーションの制約がある模様
Failed assertion: line 181 pos 12: ‘begin <= 1.0’: is not true

//動かない
        .drive(ColorTween(begin: Colors.black, end: Colors.amber));
//動く
        .drive(ColorTween(begin: Colors.blue, end: Colors.amber));

Pocket

関連記事: