Dart 颤振小部件'；s extreem代码缩进

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

不过，有一件事让我有点不快，那就是在创建小部件时，代码缩进中出现了巨大的起伏。以下是一个例子：

小部件构建（构建上下文）{
MEMEDATA MEMEDATA=Theme.of（上下文）；
归还新脚手架(
车身：新衬垫(
填充：常数边集全部（10.0），
儿童：
新专栏(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
新行(
mainAxisAlignment:mainAxisAlignment.start，
子项：icons.map（（iconda iconda）{
退回新货柜(
边距：所有新边集（10.0），
孩子：新的图标按钮(
图标：新图标（iconData），按下时：（）{
//TODO:实现
}),
);
}).toList（），
),
新扩展(
子：新对齐(
对齐：分馏loffset.center，
孩子：新的方面(
aspectRatio:1.0，
子：新堆栈(
儿童：[
新定位填充(
子对象：新的动画生成器(
动画：_控制器，
生成器：（BuildContext上下文，小部件子项）{
返回新的CustomPaint(
画家：新画家(
动画：_控制器，
颜色：主题数据。指示颜色，
背景颜色：Colors.white，
),
);
}
),
),
新对齐(
对齐：分馏loffset.center，
子：新列(
mainAxisAlignment:mainAxisAlignment.space，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
新文本(
“标签”，样式：主题数据.textTheme.subhead），
新动画生成器(
动画：_控制器，
生成器：（BuildContext上下文，小部件子项）{
返回新文本(
剩余时间，
样式：themeData.textTheme.display4，
);
}
),
新文本（“+1”，样式：themeData.textTheme.title），
],
),
),
],
),
),
),
),
新容器(
边距：所有新边集（10.0），
孩子：新的一排(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
新建图标按钮（图标：新建图标（Icons.delete），打开按钮：（）{
//TODO:实现删除
}),
新浮动操作按钮(
子对象：新的动画生成器(
动画：_控制器，
生成器：（BuildContext上下文，小部件子项）{
返回新图标(
_控制器。正在初始化
？图标。暂停
：Icons.play_箭头
);
},
),
已按下：（）{
如果（_controller.isAnimating）
_controller.stop（）；
否则{
_控制器。反向(
from:_controller.value==0.0？1.0:_controller
价值
);
}
},
),
新图标按钮(
图标：新图标（图标。报警添加），按下：（）{
//TODO:实现添加时间
}),
],
),
),
],
),
),
);
}
}

---

这似乎很难阅读（因此也很难维护），并且与我所学到的关于干净代码的原则相反。我见过的大多数dart/FLART代码都非常相似，但有没有办法将其分解成更小的部分，或者使其更具可读性？或者我只需要习惯这种新的格式吗？

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

颤振为这种拆分提供了一些重构选项

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

• 提取方法
• 提取小部件

这些选项的酷之处在于，它们能处理所有事情。包括类型和参数

例如：

使用

提取小部件时

将自动将其转换为：

---

将代码拆分为方法或额外的小部件，而不是深度嵌套。是什么让您选择VS代码进行颤振开发？我注意到其他人也这么做了。这仅仅是你曾经使用过的IDE吗

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