flutter: how to make container border like this?

Issue

I want it to be responsive,
Whatever my text is, the border of my container should be fixed.

I want it to be responsive,
Whatever my text is, the border of my container should be fixed.

I want it to be responsive,
Whatever my text is, the border of my container should be fixed.

I want to make container border like this.

But it’s happening to me like this .

This is my code of container part.

              Container(
                padding: EdgeInsets.symmetric(horizontal: 27, vertical: 22),
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 4,
                decoration: BoxDecoration(color: whitetext, boxShadow: [
                  BoxShadow(
                    offset: Offset(0, 3),
                    blurRadius: 9,
                    spreadRadius: 4,
                    color: grey,
                  )
                ]),
                child: Column(
                  children: [
                    Row(
                      children: [
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 22, vertical: 10),
                          decoration: BoxDecoration(
                              border: Border(
                            right: BorderSide(
                              color: grey,
                              width: 1.0,
                            ),
                            bottom: BorderSide(
                              color: grey,
                              width: 1.0,
                            ),
                          )),
                          child: Column(
                            children: [
                              Text(
                                'Rajan Sonavane',
                                style: titleBold()
                                    .copyWith(fontWeight: FontWeight.w600),
                              ),
                              Text('Gram Sevak', style: listGreenText())
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 22, vertical: 10),
                          decoration: BoxDecoration(
                              border: Border(
                            bottom: BorderSide(
                              color: grey,
                              width: 1.0,
                            ),
                          )),
                          child: Column(
                            children: [
                              Text(
                                'Amita Sontakke',
                                style: titleBold()
                                    .copyWith(fontWeight: FontWeight.w600),
                              ),
                              Text('Police Patil', style: listGreenText())
                            ],
                          ),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 22, vertical: 10),
                          decoration: BoxDecoration(
                              border: Border(
                            right: BorderSide(
                              color: grey,
                              width: 1.0,
                            ),
                          )),
                          child: Column(
                            children: [
                              Text(
                                'Kailas Sawant',
                                style: titleBold()
                                    .copyWith(fontWeight: FontWeight.w600),
                              ),
                              Text('Clerk', style: listGreenText())
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.symmetric(
                              horizontal: 22, vertical: 10),
                          decoration: BoxDecoration(),
                          child: Column(
                            children: [
                              Text(
                                'Baliram Lokare',
                                style: titleBold()
                                    .copyWith(fontWeight: FontWeight.w600),
                              ),
                              Text('Clerk', style: listGreenText())
                            ],
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),

Please help me i dont know to make it.

Solution

Try wrapping the Container children of your Rows with an Expanded

Answered By – Christian

Answer Checked By – David Goodson (FlutterFixes Volunteer)