为我展示在Flutter中执行此操作的更好方法

Question

我刚刚开始自己​​动手编写代码。一世到目前为止，我们已经构建了此文件here is the image。您能告诉我什么是更好的代码吗？更干净。我为此使用了行小部件，但我想也许应该与堆栈配合使用。因为现在我要在向下溢出的应用栏中间添加文本字段框。

child: Stack(
        children: <Widget>[
          Scaffold(
            backgroundColor: Color.fromRGBO(255, 202, 6, 1),
            appBar: PreferredSize(
              preferredSize: Size.fromHeight(90.0),
              child: Padding(
                padding: const EdgeInsets.only(left: 20, top: 20, bottom: 10),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    CircleAvatar(backgroundImage: NetworkImage(
                          "https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_thumb,g_face,r_max/face_left.png"),
                      radius: 32,
                      backgroundColor: Colors.white,
                      child: AppBar(
                        backgroundColor: Colors.transparent,
                        elevation: 0,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 13, top: 8),
                      child: Text(
                        'Someones Name',
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 20),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 100, bottom: 30),
                      child: Switch(
                        inactiveThumbColor: Colors.white,
                        activeColor: Colors.grey[700],
                        value: false,
                        onChanged: (bool state) {
                          print(state);
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
            body: Container(
              height: 800,
              width: 500,
              decoration: BoxDecoration(
                color: Color.fromRGBO(251, 251, 251, 1),
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(15),
                ),
              ),
            ),
          ),
        ],
        overflow: Overflow.visible,
      ),
    );

Answer 1

您可以使用Axis Alignment和Flex项目的功能。下面的示例获得所需的结果。

Scaffold(
      backgroundColor: Color.fromRGBO(255, 202, 6, 1),
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(90.0),
        child: Container(
          margin: EdgeInsets.only(top: 20),
          padding: EdgeInsets.all(30),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_thumb,g_face,r_max/face_left.png"),
                    radius: 32,
                    backgroundColor: Colors.white,
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 10),
                    child: Text(
                      'Name',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                    ),
                  ),
                ],
              ),
              Flexible(
                child: Switch(
                  inactiveThumbColor: Colors.white,
                  activeColor: Colors.grey[700],
                  value: false,
                  onChanged: (bool state) {
                    print(state);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Color.fromRGBO(251, 251, 251, 1),
          borderRadius: BorderRadius.vertical(
            top: Radius.circular(15),
          ),
        ),
      ),
    );