Clever Geek Handbook

フラッター。Dart拡張機能によるウィジェットレイアウトの簡素化

画像



Dart 2.7では、開発者が既存のタイプに新しい機能を追加できるようにする拡張機能が導入されました。拡張機能は、ビジネスロジックを作成するときだけでなく、他のタスクがあるときにも非常に役立ちます。このようなタスクの例として、ウィジェットの操作があります。



ViewModifierSwiftUI に触発されたiOS開発の経験に基づいて、ウィジェットツリーの大きな入れ子に起因する視覚的な混乱を減らすために、同様の方法でDart拡張機能を使用する方法を見つけたかったのです。



例を見てみましょう！



ウィジェットがネストされたオプション



以下は、MyWidgetテキストが入ったウィジェットですPadding（dartpad.devの標準的な例から）。



class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
      );
  }
}


次に、Dart拡張機能で同じことを行う方法を見てみましょう。



拡張付きオプション



Widgetメソッドでクラスの拡張を作成しますpadding。このメソッドが呼び出されると、オブジェクトは次のようにラップされPaddingます。



extension WidgetModifier on Widget {
  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(16)]) {
    return Padding(
      padding: value,
      child: this,
    );
  }
}


新しい拡張機能ではMyWidget、次のように更新できます。



class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding();
  }
}


, , ! , , .



:



extension WidgetModifier on Widget {

  // ...

  Widget background(Color color) { // 
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
      ),
      child: this,
    );
  }

  Widget cornerRadius(BorderRadiusGeometry radius) { //  
    return ClipRRect(
      borderRadius: radius,
      child: this,
    );
  }

  Widget align([AlignmentGeometry alignment = Alignment.center]) { // 
    return Align(
      alignment: alignment,
      child: this,
    );
  }
}


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding()
            .background(Colors.lightBlue)
            .cornerRadius(BorderRadius.all(Radius.circular(8.0)))
            .padding(EdgeInsets.symmetric(horizontal: 8, vertical: 16))
            .background(Colors.purple);
  }
}




dartpad.dev

? , ! , , .





この記事ではViewModifier、SwiftUI と同様の概念を使用して、Flutterプロジェクトでウィジェットのツリーを形成する別の方法を検討しました。このアプローチでは、ネストを減らすことでウィジェットツリーを簡略化できます。また、そのような拡張機能の例をいくつか示しただけですが、同じ原理で、同じように役立つ他の場合のために多くの新しい拡張機能を作成できます。



ご清聴ありがとうございました！この投稿がお役に立てば幸いです。この素材について質問やコメントがある場合は、Twitterでお気軽にお問い合わせください。



次回まで！



More articles:


All Articles