フラッタ＆ダーツのヒント-レビューの週

ハローリーダー
フラッタ＆ダーツティップシリーズの10番目のポストにようこそ.

10週間前、私はこのシリーズを開始しました.私の目標は、このシリーズで少なくとも100のヒントを持つことです.
1 - LayoutBuilderは、親ウィジェットのサイズに依存するウィジェットツリーを作成するのに役立ちます.

      LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 750) {
          return Container(
            color: Colors.green,
            height: 100,
            width: 100,
          );
        } else {
          return Container(
            color: Colors.yellow,
            height: 100,
            width: 100,
          );
        }
      },
    );

Try it on DartPad here

2 -ラップは、子ウィジェットを水平または垂直に表示するウィジェットです.これは、メインの軸に前の子の隣にそれぞれの子を配置しようとします.十分なスペースがないならば、それは十字軸でその既存の子供に隣接して新しい走力をつくります.

    Wrap(
      children: List.generate(
        10,
        (index) => Container(
          margin: const EdgeInsets.all(10),
          color: Colors.green,
          height: 100,
          width: 100,
        ),
      ),
    );

Try it on DartPad here

3 - AnimateDiconは他のアイコンとの切り替えをアニメーションフラッターウィジェットです.

      AnimatedIcon(
          icon: AnimatedIcons.pause_play,
          size: 52,
          progress: myAnimation
      ),

Try it on DartPad here

4 - AnimatedContainerウィジェットアニメーション付きコンテナウィジェットです.これは、そのプロパティの値を変更することによってアニメーション化することができます.

    AnimatedContainer(
        width: _width,
        height: _height,
        decoration: BoxDecoration(
          color: _color,
          borderRadius: _borderRadius,
        ),
        duration: Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
      ),

Try it on DartPad here

5 - SliverAppBarは、フローティングアプリケーションバーを与えるウィジェットです.

        SliverAppBar(
          pinned: _pinned,
          snap: _snap,
          floating: _floating,
          expandedHeight: 160.0,
          flexibleSpace: const FlexibleSpaceBar(
            title: Text('SliverAppBar'),
            background: FlutterLogo(),
          ),
        ),

Try it on DartPad here

6 - AnimatedOpacityウィジェットは、与えられた不透明度が変化するたびに、指定された持続時間にわたって自動的に子の不透明度を移行します.

        AnimatedOpacity(
          opacity: _opacity,
          duration: const Duration(seconds: 1),
          curve: Curves.bounceInOut,
          // The green box must be a child of the AnimatedOpacity widget.
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),

Try it on DartPad here

では来週.👋🏻

Follow me on for more tips about #coding, #learning, #technology...etc.

Check my Apps on Google Play & Apple Store

カバー画像Ryan Quintal