Flutter 小部件的极值代码缩进

Question

我计划从 Android 和 iOS 开发切换到 Flutter。只需要维护一个代码库的想法非常令人兴奋。在这一点上，我仍然只是观察和学习。

不过，让我有点反感的一件事是创建小部件时代码缩进中的巨大山脉和山谷。这是从这个答案中获取的一个例子：

  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return new Scaffold(
      body: new Padding(
        padding: const EdgeInsets.all(10.0),
        child:
        new Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: icons.map((IconData iconData) {
                return new Container(
                  margin: new EdgeInsets.all(10.0),
                  child: new IconButton(
                    icon: new Icon(iconData), onPressed: () {
                    // TODO: Implement
                  }),
                );
              }).toList(),
            ),
            new Expanded(
              child: new Align(
                alignment: FractionalOffset.center,
                child: new AspectRatio(
                  aspectRatio: 1.0,
                  child: new Stack(
                    children: <Widget>[
                      new Positioned.fill(
                        child: new AnimatedBuilder(
                          animation: _controller,
                          builder: (BuildContext context, Widget child) {
                            return new CustomPaint(
                              painter: new ProgressPainter(
                                animation: _controller,
                                color: themeData.indicatorColor,
                                backgroundColor: Colors.white,
                              ),
                            );
                          }
                        ),
                      ),
                      new Align(
                        alignment: FractionalOffset.center,
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            new Text(
                              'Label', style: themeData.textTheme.subhead),
                            new AnimatedBuilder(
                              animation: _controller,
                              builder: (BuildContext context, Widget child) {
                                return new Text(
                                  timeRemaining,
                                  style: themeData.textTheme.display4,
                                );
                              }
                            ),
                            new Text('+1', style: themeData.textTheme.title),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            new Container(
              margin: new EdgeInsets.all(10.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  new IconButton(icon: new Icon(Icons.delete), onPressed: () {
                    // TODO: Implement delete
                  }),
                  new FloatingActionButton(
                    child: new AnimatedBuilder(
                      animation: _controller,
                      builder: (BuildContext context, Widget child) {
                        return new Icon(
                          _controller.isAnimating
                            ? Icons.pause
                            : Icons.play_arrow
                        );
                      },
                    ),
                    onPressed: () {
                      if (_controller.isAnimating)
                        _controller.stop();
                      else {
                        _controller.reverse(
                          from: _controller.value == 0.0 ? 1.0 : _controller
                            .value,
                        );
                      }
                    },
                  ),
                  new IconButton(
                    icon: new Icon(Icons.alarm_add), onPressed: () {
                    // TODO: Implement add time
                  }),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这似乎难以阅读（因此难以维护），并且与我学到的有关干净代码的原则背道而驰。我见过的大多数 dart/flutter 代码都非常相似，但是有没有办法将其分解成更小的部分或以其他方式使其更具可读性？还是我只需要习惯这种新的格式化方式？

Answer 1

SO 上的大多数答案都包含在一个块中，因为它更容易。但更理想的编码方式是将这个大嵌套块的一部分提取到小部件或方法中。

Flutter 为这种拆分提供了一些重构选项。

例如，在 VS 代码中，您可以选择此类块的一部分，按ctrl+,或您计算机上的任何等效项；它会提出一些选项，例如：

• 提取方法
• 提取小部件

这些选项很酷的事情是，他们照顾的寄托都。包括类型和参数。

例如以下内容：

使用时extract widget会自动转换为：