如何在 flutter 中为每个类别创建单独的框

Question

我正在创建一个员工个人资料页面，为此我有 4 到 5 个类别，例如个人数据、家庭信息、技能、员工历史。

我的输出应该是这样的

对于所有类别，我如何在 flutter 中创建它。

我已经做到了

并想将其转换为上面的设计。

----------------已编辑的问题---------------------------- ----

我做了下面的代码，但它不符合我的要求。

 Padding(padding: EdgeInsets.fromLTRB(15, 5,50, 0),
           child:Container(decoration: BoxDecoration(
                border: Border.all(color: Colors.blueAccent,width: 100) 
                   
            ),
            child:Padding(padding: EdgeInsets.fromLTRB(15, 5,50, 0),
            child: TextField(
              
              decoration: InputDecoration(border: InputBorder.none),
            ),
            
           ))

这是它的输出

如果有人知道小部件的名称或如何创建它，请提供帮助。

Answer 1

兄弟像这样给容器取一个容器给定边界

 decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),

之后获取输入字段并使该字段边框 none 像这样

borde:InputBorder.none

所以你可以通过这种方式轻松做到这一点

Answer 2

您可以使用 Stack、Containers 和 Column

获得此布局

Stack(
       children: <Widget>[
                      Container(
                        margin: EdgeInsets.symmetric(
                            vertical: 20, horizontal: 20),
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 2),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Column(
                            children: [
                              TextFormField(
                                controller: _addressController,
                                keyboardType: TextInputType.text,
                                decoration: InputDecoration(
                                  hintText: "Enter Address",
                                  prefixIcon: Icon(
                                    Icons.home,
                                    color: Colors.grey,
                                  ),
                                  hintStyle: TextStyle(
                                      fontStyle: FontStyle.normal,
                                      fontSize: 13,
                                      color: Colors.grey),
                                  enabledBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                  focusedBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              TextFormField(
                                controller: _addressController,
                                keyboardType: TextInputType.text,
                                decoration: InputDecoration(
                                  hintText: "Enter Address",
                                  prefixIcon: Icon(
                                    Icons.home,
                                    color: Colors.grey,
                                  ),
                                  hintStyle: TextStyle(
                                      fontStyle: FontStyle.normal,
                                      fontSize: 13,
                                      color: Colors.grey),
                                  enabledBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                  focusedBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              TextFormField(
                                controller: _addressController,
                                keyboardType: TextInputType.text,
                                decoration: InputDecoration(
                                  hintText: "Enter Address",
                                  prefixIcon: Icon(
                                    Icons.home,
                                    color: Colors.grey,
                                  ),
                                  hintStyle: TextStyle(
                                      fontStyle: FontStyle.normal,
                                      fontSize: 13,
                                      color: Colors.grey),
                                  enabledBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                  focusedBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              TextFormField(
                                controller: _addressController,
                                keyboardType: TextInputType.text,
                                decoration: InputDecoration(
                                  hintText: "Enter Address",
                                  prefixIcon: Icon(
                                    Icons.home,
                                    color: Colors.grey,
                                  ),
                                  hintStyle: TextStyle(
                                      fontStyle: FontStyle.normal,
                                      fontSize: 13,
                                      color: Colors.grey),
                                  enabledBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                  focusedBorder: new OutlineInputBorder(
                                    borderSide: new BorderSide(
                                        color: Colors.black, width: 3),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              TextButton(
                                onPressed: () {},
                                child: Text(
                                  'Submit',
                                  style: TextStyle(
                                    fontSize: 13,
                                  ),
                                ),
                                style: ButtonStyle(
                                  side: MaterialStateProperty.all(
                                    BorderSide(
                                        width: 2, color: Colors.black),
                                  ),
                                  foregroundColor:
                                      MaterialStateProperty.all(
                                          Colors.black),
                                  padding: MaterialStateProperty.all(
                                      EdgeInsets.symmetric(
                                          vertical: 2, horizontal: 30)),
                                  textStyle: MaterialStateProperty.all(
                                    TextStyle(fontSize: 30),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Positioned(
                        left: 30,
                        top: 10,
                        child: Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 3,
                            vertical: 2,
                          ),
                          color: Colors.white,
                          child: Text(
                            'Personal Data',
                            style: TextStyle(
                                color: Colors.black, fontSize: 12),
                          ),
                        ),
                      ),
                    ],
                  ),

如何在 flutter 中为每个类别创建单独的框

how to create separate box for each category in flutter

components

widget

box

flutter