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

14823 ワード
flutter dart beginners codenewbie テキストリンク
ハローリーダー
フラッタ＆ダーツティップスシリーズの9番目にようこそ.私の目標は、このシリーズで少なくとも100のヒントを持つことです.今まで、私はあなたと50のヒントを共有している.もっと付け加えましょう.
1 -あなたはグラデーションルックを適用するShaderMaskウィジェットを使用し、その子に感じる.

      body: Center(
        child: ShaderMask(
          blendMode: BlendMode.srcIn,
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              colors: [Colors.red, Colors.green],
              tileMode: TileMode.clamp,
            ).createShader(bounds);
          },
          child:
              const Text('This is a colorful Text', style: TextStyle(fontSize: 36)),
        ),
      ),

2 - AnimatedSizeは、指定された子のサイズを変更するたびに指定された期間の上に自動的にサイズを変更するウィジェットです.

class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin {
  double _size = 50.0;
  bool _large = false;

  void _updateSize() {
    setState(() {
      _size = _large ? 250.0 : 100.0;
      _large = !_large;
    });
  }


  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _updateSize(),
      child: Container(
        color: Colors.amberAccent,
        child: AnimatedSize(
          vsync: this,
          curve: Curves.easeInCirc,
          duration: const Duration(seconds: 2),
          child: FlutterLogo(size: _size),
        ),
      ),
    );
  }
}

3 -複数の列とさまざまなサイズの行のgridviewを作成するには、FlutterSense


  new StaggeredGridView.countBuilder(
    crossAxisCount: 4,
    itemCount: 8,
    itemBuilder: (BuildContext context, int index) => new Container(
        color: Colors.green,
        child: new Center(
          child: new CircleAvatar(
            backgroundColor: Colors.white,
            child: new Text('$index'),
          ),
        )),
    staggeredTileBuilder: (int index) =>
        new StaggeredTile.count(2, index.isEven ? 2 : 1),
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
  )
4 -あなたの子供ウィジェットにカラーフィルタを適用するには、ColorFilterウィジェットを使用することができます


      Column(
        children: [
          // The original image
          Image.network(_imageUrl),

          // The black-and-white image
          ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Image.network(_imageUrl),
          ),
        ],
      ),
5 -同じ画面上に複数のフローティングボタンを作成するにはFlutterRange SpeedRangeダイヤルプラグインを使用してください

...

      floatingActionButton: SpeedDial(
          icon: Icons.share,
          backgroundColor: Colors.amber,
          children: [
            SpeedDialChild(
              child: Icon(Icons.face),
              label: 'Social Network',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do someting */},
            ),
            SpeedDialChild(
              child: Icon(Icons.email),
              label: 'Email',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do something */},
            ),
            SpeedDialChild(
              child: Icon(Icons.chat),
              label: 'Message',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do something */},
            ),
          ]),

...
6 -テキストウィジェットの複数の影を作成できます.次の例を確認します.


        Text('Important Text',
          style: TextStyle(
            color: Colors.black,
            fontSize: 50,
            fontWeight: FontWeight.bold,
            shadows: [
              Shadow(
                  color: Colors.red[500]!,
                  offset: Offset(-50, -50),
                  blurRadius: 5),
              Shadow(
                  color: Colors.green[200]!,
                  offset: Offset(50, 50),
                  blurRadius: 5),
            ],
          ),
        ),

では来週.👋🏻

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

Check my Apps on Google Play & Apple Store


カバー画像Bryan Turner
電子冒険:エピソード15:非同期コマンド実行
TIL 12 - React Basic Concepts