Talk about my views on the future development of flutter and “nested hell”

Time:2021-10-19

Talk about my views on the future development of flutter and

Future development of flutter

I have to mention flutterFuchsiaSystem, which is an operating system that has not been officially released, citing the senior vice presidents of Android and chromeHiroshi LockheimerIn a podcast, fuchsia was introduced as follows:

Not only mobile phones and personal computers, in the world of Internet of things, more and more devices need the support of operating system and new software running environment. I think there is still much room for development in many operating systems with different advantages and specialization. Fuchsia is one of them, so please continue to pay attention.

Yes, fuchsia system is an operating system developed for the Internet of things, which is abbreviated as the Internet of thingsIoT, now the world is betting on IOT, including domestic companies such as Huawei and Xiaomi.

What does flutter have to do with Fuchsia?

Fluent is the only UI development framework officially designated by fuchsia.

Now there are many Internet of things operating systems, can Fuchsia stand out?

Not necessarily. Who can say what will happen in the future? But in my opinion, fuchsia is the most likely Internet of things operating system to develop, because in addition to its own excellence, the biggest obstacle to the development of an operating system isecologyFuchsia has natural advantages in ecology. A foreign report once said:

Google hopes to seamlessly migrate android app to Fuchsia, and has been doing relevant work.

Imagine how other IOT operating systems can compete with Google’s seamless migration of android app to fuchsia.

Here we quote the sentence at the bottom of the Google official account.

Predicting the future is better than creating the future

In terms of cross platform technology, fluent also has many competitors, such as HTML5, react native, weex, fast applications, applets, etc. I once explained in detail the development history, advantages and disadvantages of each cross platform technology in [introduction to cross platform technology development] ().

Will the emergence of flutter end other cross platform technologies? I don’t think so. React native hasn’t completely killed HTML5 after developing for so many years. It should be because HTML5 has its unique application scenarios, such as marketing activity scenarios, news or blog details pages, which are very suitable for HTML5. Therefore, it is impossible for flutter to end other cross platform technologies. To sum up:

For a long time in the future, it will be an era of cross platform technology coexistence, but the application scenario of FLUENT is broader.

Fluent nested hell

At present, the most common way to make complaints about Flutter is to write Flutter nested hell. What is the reason for this phenomenon? Personally, I think the biggest reason is that most open source fluent projects are written in this nested way (including myself in the past), which leads later beginners to think that there is no problem. When the project becomes more and more complex, this nested writing method brings great challenges to the maintenance of the project. Let’s talk about how to avoid this nested writing method?

For example, the following effects can be achieved:

Talk about my views on the future development of flutter and

How to write nested Hell:

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        height: 45,
        child: Row(
          children: <Widget>[
            SizedBox(
              width: 30,
            ),
            Icon(
              Icons.notifications,
              color: Colors.blue,
            ),
            SizedBox(
              width: 30,
            ),
            Expanded(
              Child: text ('message center '),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(50)),
                  color: Colors.red),
              child: Text(
                '2',
                style: TextStyle(color: Colors.white),
              ),
            ),
            SizedBox(
              width: 15,
            ),
          ],
        ),
      ),
      Divider(),
      //Write 6 similar to the above layout
    ],
  );
}

The above is only the layout of the first item, and there are seven below. One is more than 30 lines of code, and seven is more than 200 lines of layout code. This is only the layout code. If you add logic, you can’t imagine it.

Maybe there is a little encapsulation idea. The developer will encapsulate each item into a method, which is written as follows:

_buildItem(IconData iconData, Color iconColor, String title, Widget widget) {
  return Container(
    height: 45,
    child: Row(
      children: <Widget>[
        SizedBox(
          width: 30,
        ),
        Icon(
          iconData,
          color: iconColor,
        ),
        SizedBox(
          width: 30,
        ),
        Expanded(
          child: Text('$title'),
        ),
        widget,
        SizedBox(
          width: 15,
        ),
      ],
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
    ],
  );
}

This looks much better and basically solves the problem of nested hell, but there is still a very big problem-Performance issues, once one of the numbers changes, the whole page needs to be rebuilt. A very important principle in flutter development isRebuild as few components as possibleTherefore, the component encapsulated in the method above becomes a widget.

class SettingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _SettingItem(
          iconData: Icons.notifications,
          iconColor: Colors.blue,
          Title: 'message center',
          suffix: _NotificationsText(
            text: '2',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.thumb_up,
          iconColor: Colors.green,
          Title: 'I liked it',
          suffix: _Suffix(
            Text: '121 articles',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.grade,
          iconColor: Colors.yellow,
          Title: 'collection',
          suffix: _Suffix(
            Text: '2',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.shopping_basket,
          iconColor: Colors.yellow,
          Title: 'purchased booklet',
          suffix: _Suffix(
            Text: '100',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.account_balance_wallet,
          iconColor: Colors.blue,
          Title: 'my wallet',
          suffix: _Suffix(
            Text: '100000',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.location_on,
          iconColor: Colors.grey,
          Title: 'read articles',
          suffix: _Suffix(
            Text: '1034 articles',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.local_offer,
          iconColor: Colors.grey,
          Title: 'label management',
          suffix: _Suffix(
            Text: '27',
          ),
        ),
      ],
    );
  }
}

class _SettingItem extends StatelessWidget {
  const _SettingItem(
      {Key key, this.iconData, this.iconColor, this.title, this.suffix})
      : super(key: key);

  final IconData iconData;
  final Color iconColor;
  final String title;
  final Widget suffix;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 30,
          ),
          Icon(iconData,color: iconColor,),
          SizedBox(
            width: 30,
          ),
          Expanded(
            child: Text('$title'),
          ),
          suffix,
          SizedBox(
            width: 15,
          ),
        ],
      ),
    );
  }
}

class _NotificationsText extends StatelessWidget {
  final String text;

  const _NotificationsText({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(50)),
          color: Colors.red),
      child: Text(
        '$text',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

class _Suffix extends StatelessWidget {
  final String text;

  const _Suffix({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      '$text',
      style: TextStyle(color: Colors.grey.withOpacity(.5)),
    );
  }
}

Package as individual small components, and package the changed components separately as far as possible, so that the whole control tree will not be rebuilt, which enhances readability and maintainability, and greatly improves the performance.

The last sentence is:

Although everything in the fluent is a component, it does not mean that everything should be written in the component.

Of course, this is only my personal opinion. If you have a better method, you are welcome to discuss it together. Start from me, standardize the writing method, and make a small contribution to the development of flutter.

communication

Laomeng fluent blog address (330 controls usage):http://laomengit.com

Welcome to Flutter exchange group (WeChat: laomengit) and official account [Lao Meng Flutter]:

Talk about my views on the future development of flutter and Talk about my views on the future development of flutter and