Flutter 新闻客户端 - 13 使用 supernova、imgcook 导入 sketch psd xd 自动生成代码

B站视频

https://www.bilibili.com/video/BV1t5411W7Tt

本节目标

• 了解 supernova 代码生成器作用
• 导入 xd 设计稿
• 如何高效使用生成代码

正文

代码生成器

• supernova
• imgcook

有潜力加入代码生成功能

• lanhuapp
• mockplus

supernova 代码生成器

https://supernova.io/

导入 xd 设计稿，生成代码

商业设计稿不好直接分享, 可以加微信联系 ducafecat

编写用户中心界面代码

组织代码结构

class _AccountPageState extends State<AccountPage> {
  // 个人页面 头部
  Widget _buildUserHeader() {}

  // 列表项
  Widget _buildCell() {}

  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context);

    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          _buildUserHeader(),
          _buildCell(),
        ],
      ),
    );
  }
}

直接使用生成的代码

• 个人页面 头部

  Widget _buildUserHeader() {
    return Container(
              height: 333,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Positioned(
                    left: 0,
                    right: 0,
                    child: Container(
                      height: 333,
                      decoration: BoxDecoration(
                        color: AppColors.primaryBackground,
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          Container(
                            height: 2,
                            decoration: BoxDecoration(
                              color: AppColors.primaryElement,
                            ),
                            child: Container(),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    left: 20,
                    top: 40,
                    right: 20,
                    bottom: 21,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Container(
                          height: 198,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Align(
                                alignment: Alignment.topCenter,
                                child: Container(
                                  width: 108,
                                  height: 108,
                                  child: Stack(
                                    alignment: Alignment.center,
                                    children: [
                                      Positioned(
                                        top: 0,
                                        child: Container(
                                          width: 108,
                                          height: 108,
                                          decoration: BoxDecoration(
                                            color: AppColors.primaryBackground,
                                            boxShadow: [
                                              Shadows.primaryShadow,
                                            ],
                                            borderRadius: Radii.k54pxRadius,
                                          ),