Home > Net >  How to set the container width on the page?
How to set the container width on the page?

Time:08-01

This is a design I want:

enter image description here

This is my current design:

enter image description here

I am new to using flutter. My question is how to set the container width so that the textfield box looks more fit and neat. I tried to set the container width now but still failed to make the textfield box look fit. What should I do? Please help from stack overflow.

This is my code:

Container(
                        width: double.infinity,
                        margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                        padding: EdgeInsets.all(15),
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: Colors.transparent,
                            width: 1.0,
                          ),
                        ),
                        //SizedBox(height: 30),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Expanded(
                              flex: 1,
                              child: Center(
                                child: FutureBuilder(
                                  future: _getSignedURL(
                                      widget.patientProfile.avatar),
                                  builder: (BuildContext context,
                                      AsyncSnapshot snapshot) {
                                    if (snapshot.data == null) {
                                      return Container(
                                        color: Colors.white,
                                        child: Container(
                                          width: 200,
                                          height: 200,
                                          decoration: BoxDecoration(
                                            color: Color.fromRGBO(
                                                255, 255, 255, 0.3),
                                            border: Border.all(
                                              color: Colors.black12,
                                              width: 1.0,
                                            ),
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(200.0)),
                                          ),
                                        ),
                                      );
                                    } else {
                                      return CircleAvatar(
                                        radius: 100,
                                        backgroundImage:
                                            NetworkImage(snapshot.data),
                                      );
                                    }
                                  },
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                          width: double.infinity,
                          margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                          padding: EdgeInsets.all(15),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.transparent,
                              width: 1.0,
                            ),
                          ),
                          child: Row(
                            children: [
                              Expanded(
                                  child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    height: 30,
                                    child: Text(
                                      'First Name',
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          fontSize: 16),
                                    ),
                                  ),
                                  SizedBox(
                                    width: 400,
                                    child: TextFormField(
                                      style:
                                          const TextStyle(color: Colors.black),
                                      controller: firstName,
                                      onSaved: (String? value) {
                                        firstName.text = value!;
                                      },
                                      decoration: const InputDecoration(
                                        border: OutlineInputBorder(),
                                        hintText: 'First Name',
                                        hintStyle: TextStyle(
                                            color: Colors.black, fontSize: 16),
                                      ),
                                    ),
                                  ),
                                ],
                              )),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'Last Name',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 400,
                                      child: TextFormField(
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller: lastName,
                                        onSaved: (String? value) {
                                          lastName.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'Last Name',
                                          hintStyle: TextStyle(
                                              color: Colors.black,
                                              fontSize: 16),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'Date Of Birth',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 400,
                                      child: TextFormField(
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller: dateOfBirth,
                                        onSaved: (String? value) {
                                          dateOfBirth.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'Date Of Birth',
                                          hintStyle: TextStyle(
                                              color: Colors.black,
                                              fontSize: 16),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          )),
                          Container(
                          width: double.infinity,
                          margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                          padding: EdgeInsets.all(15),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.transparent,
                              width: 1.0,
                            ),
                          ),
                          child: Row(
                            children: [
                              Expanded(
                                  child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    height: 30,
                                    child: Text(
                                      'Gender',
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          fontSize: 16),
                                    ),
                                  ),
                                  SizedBox(
                                    width: 400,
                                    child: TextFormField(
                                      style:
                                          const TextStyle(color: Colors.black),
                                      controller: gender,
                                      onSaved: (String? value) {
                                        gender.text = value!;
                                      },
                                      decoration: const InputDecoration(
                                        border: OutlineInputBorder(),
                                        hintText: 'Gender',
                                        hintStyle: TextStyle(
                                            color: Colors.black, fontSize: 16),
                                      ),
                                    ),
                                  ),
                                ],
                              )),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'Marital Status',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 400,
                                      child: TextFormField(
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller: maritalStatus,
                                        onSaved: (String? value) {
                                          maritalStatus.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'Marital Status',
                                          hintStyle: TextStyle(
                                              color: Colors.black,
                                              fontSize: 16),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'ID or Passport',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 400,
                                      child: TextFormField(
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller:govermentIssuedID,
                                        onSaved: (String? value) {
                                          govermentIssuedID.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'ID or Passport',
                                          hintStyle: TextStyle(
                                              color: Colors.black,
                                              fontSize: 16),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          )),
                          Container(
                          width: double.infinity,
                          margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                          padding: EdgeInsets.all(15),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.transparent,
                              width: 1.0,
                            ),
                          ),
                          child: Row(
                            children: [
                              Expanded(
                                  child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    height: 30,
                                    child: Text(
                                      'Phone Number',
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          fontSize: 16),
                                    ),
                                  ),
                                  SizedBox(
                                    width: 400,
                                    child: TextFormField(
                                      style:
                                          const TextStyle(color: Colors.black),
                                      controller: contactNumber,
                                      onSaved: (String? value) {
                                        contactNumber.text = value!;
                                      },
                                      decoration: const InputDecoration(
                                        border: OutlineInputBorder(),
                                        hintText: 'Phone Number',
                                        hintStyle: TextStyle(
                                            color: Colors.black, fontSize: 16),
                                      ),
                                    ),
                                  ),
                                ],
                              )),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'Email',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 400,
                                      child: TextFormField(
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller: email,
                                        onSaved: (String? value) {
                                          email.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'Email',
                                          hintStyle: TextStyle(
                                              color: Colors.black,
                                              fontSize: 16),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'District',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 400,
                                      child: TextFormField(
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller:address,
                                        onSaved: (String? value) {
                                          address.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'District',
                                          hintStyle: TextStyle(
                                              color: Colors.black,
                                              fontSize: 16),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          )),

CodePudding user response:

You can control the position of elements in a row by using the alignment property.. Try

Container(
 width: MediaQuery.of(context).size.width,
 child: Row(
   mainAxisAlignemt : MainAxisAlignment.spaceBetween, // or MainAxisAlignment.spaceAround
   children: []
 )
)

CodePudding user response:

There is a padding property in Container widget you can use that property for this design. Add padding to the top container like this:

Container(
  padding: const EdgeInsets.symmetric(horizontal: 10),
  child: ...
)
  • Related