I'm struggling here a bit with the borders in flutter, especially with TextFormFields and / or DropdownButtons. How can I make a border like the one in the image?

Here's what I have so far:

Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Color.fromRGBO(197, 197, 197, 1),
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(10),
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 5, bottom: 5, right: 5),
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border(
                            left: BorderSide(
                              width: 3.0,
                              color: Colors.red,
                            ),
                          ),
                        ),
                        child: SizedBox(
                          width: 300,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 8.0),
                            child: DropdownButtonFormField(
                              decoration: InputDecoration(
                                enabledBorder: 
                                 UnderlineInputBorder(
                                  borderSide:
                                      BorderSide(color: 
                                       Colors.transparent),
                                ),
                                focusedBorder: 
                                 UnderlineInputBorder(
                                  borderSide:
                                      BorderSide(color: 
                                       Colors.transparent),
                                ),
                              ),
                              ...
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),

EDIT: Removed bottom border

EDIT 2: This is the closest I could get

CodePudding user response：

Use InputBorder.none to all on DropdownButtonFormField and use decoration on top level Container

Follow this widget

class FA extends StatelessWidget {
  const FA({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            border: Border.all(
              color: Color.fromRGBO(197, 197, 197, 1),
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(12),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.only(right: .0),
            child: Container(
              height: 50,
              decoration: BoxDecoration(
                // borderRadius: border,
                border: Border(
                  left: BorderSide(width: 15.0, color: Colors.red),
                ),
              ),
              child: SizedBox(
                width: 300,
                child: Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: DropdownButtonFormField<String?>(
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      enabledBorder: InputBorder.none,
                    ),
                    items: [],
                    onChanged: (Object? value) {},
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Adjust the width based on your need