phongyewtong
phongyewtong

Reputation: 5309

how do i reduce the top and bottom padding of flutter textfield within the border?

how do i reduce the top and bottom padding of flutter textfield within the border? there is too much space for top and bottom.

enter image description here

TextField(
                    textInputAction: TextInputAction.search,
                    controller: controller,
                    focusNode: focusNode,
                    autofocus: true,
                    cursorColor: Theme.of(context).primaryColor,
                    onChanged: (text) {
                      text.length >= 4
                        ?  provider.fetchSearchName(text)
                        :  buildNoData();
                    },
                    decoration: InputDecoration(
                      suffixIcon: IconButton(
                        onPressed: clearText, 
                        color: Theme.of(context).primaryColor,
                        icon: Icon(Icons.cancel_outlined)
                      ),
                      labelText: 'Search',
                      labelStyle: TextStyle(color: Colors.white),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
                        // borderRadius: BorderRadius.circular(10),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
                        // borderRadius: BorderRadius.circular(10),
                      )
                    ),
                  ),

Upvotes: -1

Views: 510

Answers (1)

Kashif Niaz
Kashif Niaz

Reputation: 277

You may use contentPadding: within InputDecoration widget.

Here's the Code

TextField(
                    textInputAction: TextInputAction.search,
                    controller: controller,
                    focusNode: focusNode,
                    autofocus: true,
                    cursorColor: Theme.of(context).primaryColor,
                    onChanged: (text) {
                      text.length >= 4
                        ?  provider.fetchSearchName(text)
                        :  buildNoData();
                    },
                    decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 5, horizontal: 12),
                      suffixIcon: IconButton(
                        onPressed: clearText, 
                        color: Theme.of(context).primaryColor,
                        icon: Icon(Icons.cancel_outlined)
                      ),
                      labelText: 'Search',
                      labelStyle: TextStyle(color: Colors.white),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
                        // borderRadius: BorderRadius.circular(10),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(width: 2, color: Theme.of(context).primaryColor),
                        // borderRadius: BorderRadius.circular(10),
                      )
                    ),
                  ),

Upvotes: 2

Related Questions