Dart extensions to flatten Flutter’s deep nested widget trees

栏目: IT技术 · 发布时间: 4年前

内容简介:In version 2.7,Coming from an iOS background and inspired by SwiftUI’s ViewModifiers, I was intrigued to use the Dart extensions in a similar fashion to reduce the visual clutter that comes with the deep tree of many nested widgets.Let’s see an example!

In version 2.7, Dart introduced extensions to allow developers to add further functionality to an existing component. Extensions can be a great tool in our toolkit when we write business logic, but they can also be as useful in other areas! One such example can be the way we construct the widgets.

Coming from an iOS background and inspired by SwiftUI’s ViewModifiers, I was intrigued to use the Dart extensions in a similar fashion to reduce the visual clutter that comes with the deep tree of many nested widgets.

Let’s see an example!

With nested widgets

Here we have the default widget created on dartpad.dev , where we also wrapped the text inside a Padding widget.

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

Now, let’s see how we can accomplish the same with the help of Dart extensions.

With extensions methods

First, we will introduce an extension on Widget that will wrap the caller with a padding Widget :

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

With this extension in place, we could turn our Widget to the following:

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

This example is just a small one, but I hope you get the picture!!

We are using the extension method as a syntactic sugar to structure our layout, instead of wrapping a widget inside another one.

Similarly, we can add more functions to our extension and create more complex user interfaces:

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

Dart extensions to flatten Flutter’s deep nested widget trees

Isn’t that great? We now have a clean and elegant widget that we can easily understand! Imagine how many levels of nested widgets you would have to use to recreate this layout without the help of extensions.

Wrap-up

To wrap up, in this post, we have followed an alternative approach on how to structure a widget tree in a Flutter project, by applying a concept similar to SwiftUI’s ViewModifiers.

As a result, this could help us flatten the widget hierarchy and reduce nesting. I have showcased a few examples of such extensions, but you can use the same concept in many other cases as you see fit.

Thanks for reading, I hope you find this post useful!

If you have any questions or comments about this post, feel free to reach out to me on Twitter !

Until next time!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ActionScript 3.0精彩范例词典

ActionScript 3.0精彩范例词典

杨东昱 编 / 2008-5 / 59.00元

《ActionScript 3.0精彩范例词典》列出了最常用的ActionScript语法,并附有详细的程序代码范例,不但教您如何使用、修改ActionScript代码,而且还以实际范例和图解,说明每项语法还能呈现哪些动画效果和功能,对学习ActipScript有所帮助。读者在阅读《ActionScript 3.0精彩范例词典》之后,将能开发出属于自己的ActionScript程序与FLASH动画......一起来看看 《ActionScript 3.0精彩范例词典》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具