如何調整 flutter 中的小部件溢出錯誤

Question

我對 flutter 真的很陌生，正在嘗試學習設計部分。 無論我做了什么來調整表格的大小，它都沒有成形。 它顯示溢出錯誤，而不是全屏顯示。

    class CustomerInfo extends StatefulWidget {
      @override
      _CustomerInfoState createState() => _CustomerInfoState();
    }

    class _CustomerInfoState extends State<CustomerInfo> {
      TextEditingController customername =
          TextEditingController(text: 'Customer Name');
      TextEditingController customerid = TextEditingController(text: 'CR20211212');
      TextEditingController customertype = TextEditingController(text: 'CR');

      TextEditingController contactno = TextEditingController(text: '12345678');
      TextEditingController contactperson =
          TextEditingController(text: 'Person to Contact');
      TextEditingController contactpersonposition =
          TextEditingController(text: 'Position of the Person');
      TextEditingController mobileno = TextEditingController(text: '12345678');
      TextEditingController tradelicense = TextEditingController(text: 'TR1000');
      TextEditingController trdExpiry = TextEditingController(text: '2021/12/12');
      TextEditingController place = TextEditingController(text: 'Location');
      TextEditingController TRN = TextEditingController(text: '100012345123450');
      TextEditingController notes = TextEditingController(text: 'Some notes');
      TextEditingController active = TextEditingController(text: 'Customer Active');

      @override
      Widget build(BuildContext context) {
        Widget subTitle = Padding(
            padding: const EdgeInsets.only(right: 56.0, top: 0.0),
            child: Text(
              'Limited information only you can modify!!!',
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.0,
              ),
            ));

        Widget registerButton = Positioned(
          left: MediaQuery.of(context).size.width / 4,
          child: Container(
            width: MediaQuery.of(context).size.width / 2,
            height: 30,
            child: Center(
                child: new Text("Update",
                    style: const TextStyle(
                        color: const Color(0xfffefefe),
                        fontWeight: FontWeight.w600,
                        fontStyle: FontStyle.normal,
                        fontSize: 16.0))),
            decoration: BoxDecoration(
                color: Colors.blueGrey,
                boxShadow: [
                  BoxShadow(
                    color: Color.fromRGBO(0, 0, 0, 0.16),
                    offset: Offset(0, 5),
                    blurRadius: 10.0,
                  )
                ],
                borderRadius: BorderRadius.circular(9.0)),
          ),
        );

        Widget registerForm = Container(
            height: MediaQuery.of(context).size.height / 2,
            child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: Column(
                  children: <Widget>[
                    Container(
                      height: MediaQuery.of(context).size.height,
                      width: MediaQuery.of(context).size.width,
                      padding: const EdgeInsets.only(left: 32.0, right: 12.0),
                      decoration: BoxDecoration(
                          color: Color.fromRGBO(255, 255, 255, 0.8),
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10),
                              bottomLeft: Radius.circular(10))),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: TextField(
                              controller: customername,
                              style: TextStyle(fontSize: 16.0),
                              decoration:
                                  InputDecoration(labelText: 'Customer Name'),
                              enabled: false,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: TextField(
                              controller: customerid,
                              style: TextStyle(fontSize: 16.0),
                              decoration: InputDecoration(labelText: 'Customer ID'),
                              enabled: false,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: TextField(
                              controller: contactno,
                              style: TextStyle(fontSize: 16.0),
                              decoration: InputDecoration(labelText: 'Contact No'),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: TextField(
                              controller: contactperson,
                              style: TextStyle(fontSize: 16.0),
                              decoration:
                                  InputDecoration(labelText: 'Contact Person'),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: TextField(
                              controller: contactpersonposition,
                              style: TextStyle(fontSize: 16.0),
                              decoration: InputDecoration(
                                  labelText: 'Contact Person Position'),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 8.0),
                            child: TextField(
                              controller: mobileno,
                              style: TextStyle(fontSize: 16.0),
                              decoration: InputDecoration(labelText: 'Mobile No'),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                )));

        Widget socialRegister = Column(
          children: <Widget>[
            Text(
              'Please take approval for any kind of other modifications!!!',
              style: TextStyle(
                  fontSize: 12.0, fontStyle: FontStyle.italic, color: Colors.white),
            ),
          ],
        );

        return Scaffold(
          appBar: AppBar(
            title: Text('Customer Information'),
            centerTitle: true,
            backgroundColor: Colors.blue.shade200,
          ),
          backgroundColor: Colors.white70,
          body: Stack(
            children: <Widget>[
              Container(
                //   Padding(
                alignment: Alignment.topRight,
                padding: const EdgeInsets.only(left: 28.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    subTitle,
                    SizedBox(height: 10),
                    //   Expanded(child: Container(child: registerForm)),
                    registerForm,
                    Container(
                      alignment: Alignment.bottomRight,
                      child: registerButton,
                    ),

                    Spacer(flex: 2),
                    Padding(
                        padding: EdgeInsets.only(bottom: 5), child: socialRegister)
                  ],
                ),
              )
            ],
          ),
        );
      }
    }

試圖從用戶端顯示一些客戶詳細信息和一些信息更改。我嘗試使用擴展並嘗試手動放置高度。

Answer 1

試試下面的代碼希望它對你有幫助。 在SingleChildScrollView()中添加您的Column並刪除Spacer

在這里參考我的回答

在此處參考SingleChildScrollView

body: SingleChildScrollView(
   child:Column(
     children:[
      //Declare Your Widgets Here
     ],
   ),
),

更新代碼：

Widget registerButton = Container(
  width: MediaQuery.of(context).size.width / 2,
  height: 30,
  child: Center(
      child: new Text("Update",
          style: const TextStyle(
              color: const Color(0xfffefefe),
              fontWeight: FontWeight.w600,
              fontStyle: FontStyle.normal,
              fontSize: 16.0))),
  decoration: BoxDecoration(
      color: Colors.blueGrey,
      boxShadow: [
        BoxShadow(
          color: Color.fromRGBO(0, 0, 0, 0.16),
          offset: Offset(0, 5),
          blurRadius: 10.0,
        )
      ],
      borderRadius: BorderRadius.circular(9.0)),
);

Answer 2

用 SingleChildScrollView 包裝你的列並刪除 spacer() 並使用擴展，因為 SingleChildScrollView 使容器高度無窮大