Flutter Bottom Overflow on custom bottom sheet

user_11204494 0
Viewed 68

You can see the problem here (I turned on flutter inspector gridlines so you can see the problem better)

Overflow disappears when I wrap my Container inside Expanded, but then my search bar height is just stretching and it isn't good. Tried to use SingleChildScrollView but it didn't do the trick.

 Container(
    margin: const EdgeInsets.symmetric(
        horizontal: AppConstants.bottomModalSheetSearchMarin,
        vertical: AppConstants.bottomModalSheetSearchMarin),
    decoration: BoxDecoration(
        color: AppColors.searchBoxBackgroundColor,
        borderRadius:
            BorderRadius.circular(AppConstants.searchBoxRadius),
  ),
    child: const TextField(
        // onChanged: (value)=>controller.filterMountain(value),
         decoration: InputDecoration(
         hintStyle:
                          TextStyle(fontSize: AppFontSizes.searchBoxHintText),
                      hintText: 'Search',
                      suffixIcon: Icon(
                        Icons.search,
                        color: AppColors.searchBoxSearchIconColor,
                      ),
                      border: InputBorder.none,
                      contentPadding:
                          EdgeInsets.all(AppPaddings.searchBoxPadding),
                    ),
                  ),
                ),

The problem is in the search bar container (we can see that from flutter inspector - show gridlines)

enter image description here

This is how it looks when I wrap Container with Expanded, (don't be bothered with the different look of the cards below)

Edit:

Here is the full bottomSheet code as requested:

bottomNavigationBar: SolidBottomSheet(
          draggableBody: false,
          headerBar: Container(
            child: ClipRRect(
              borderRadius: const BorderRadius.only(
                  topRight: Radius.circular(20),
                  topLeft: Radius.circular(20)
              ),
              child: OutlinedButton(
                  child: Column(
                    children: const [
                      Icon(Icons.expand_less,),
                      Text("Search pois")
                    ],
                  ),
                  onPressed: () {}),
            ),
          ),
          body: Container(
            color:Colors.blue,
            child: Column(
              children: [
                Container(
                  decoration: BoxDecoration(
                    color:Colors.red,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: const TextField(
                    decoration: InputDecoration(,
                      hintText: 'Search',
                      suffixIcon: Icon(Icons.search,),
                    ),
                  ),
                ),
                Obx(
                ),    
              ],
            ),
          ),
        ),
flutter-textinputfield flutter-layout dart flutter
1 Answers

You can wrap TextFiled's Container with Expanded and enable expanded on TextFiled.

body: Container(
  child: Column(
    children: [
      Expanded(
        child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(22),
            ),
            child: TextField(
              expands: true,
              maxLines: null,
              minLines: null,
            )),
      ),
    ],
  ),
),

SingleChildScrollView also work

body: SingleChildScrollView(
  child: Column(
    children: [
      Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(22),
          ),
          child: TextField(
            maxLines: 3,
            minLines: 1,
          )),
    ],
  ),
),


class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      bottomNavigationBar: SolidBottomSheet(
        draggableBody: true,
        headerBar: Container(
          child: ClipRRect(
            borderRadius: const BorderRadius.only(
                topRight: Radius.circular(22), topLeft: Radius.circular(22)),
            child: OutlinedButton(
                child: Column(
                  children: const [
                    Icon(
                      Icons.expand_less,
                    ),
                    Text(
                      "Search pois",
                    )
                  ],
                ),
                onPressed: () {}),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(22),
                  ),
                  child: TextField(
                    maxLines: 3,
                    minLines: 1,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}
user_101571270
Related