Question 255014 in Flutter Question posted in
The official Flutter documentation can be found here.

how to achieve this filter UI using Flutter?

enter image description here

how to implement this UI using flutter?

i try to add dropdownbutton to appBar. Adding Row widget with textfield and icon.
but the how to minimize textfield width?
how to make container as same height as textfield?.
thanks in advance.

Tags:

2

Answers


  1. 0
    • To make children of Row have the same height, you have to wrap Row with IntrinsicHeight and set crossAxisAlignment to CrossAxisAlignment.stretch

    enter image description here

    • Example Code
    IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      enabledBorder: OutlineInputBorder()
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: Colors.blue
                  ),
                  child: Icon(Icons.menu),
                ),
              ],
            ),
          ),
    Login or Signup to reply.
  2. 0 
      final searchAndFilterRowHeight = 50.0; //desired height for search field and the filter (blue) container

     SizedBox(
            height: searchAndFilterRowHeight,
            child: Row(
              children: [
                Expanded(
                    child: TextField(
                        decoration: InputDecoration(
                  contentPadding: EdgeInsets.zero,
                  hintText: "Search here",
                  prefixIcon: const Icon(Icons.search),
                  filled: true,
                  fillColor: Colors.white,
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10.0),
                      borderSide: BorderSide.none),
                ))),
                const SizedBox(width: 10.0),
                Container(
                  width: searchAndFilterRowHeight,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: const Center(
                      child: Icon(
                    Icons.format_align_left_sharp,
                    color: Colors.white,
                  )),
                ),
              ],
            ),
          ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search