how can i delete space between Expanded widgets in Column?

Issue

i tried to reduce space between Rows(Textfields) with height proprety,but it doesn’t work,Sizedbox didn’t work as well,can’t omit expanded widget because of my filterList(it shows“A RenderFlex overflowed by pixels ” error),i tried to fix it with flex Value but it doesn’t work too.
any Idea how can i fixt it?!

my emulator screenshot

import 'package:flutter/material.dart';
import 'package:filter_list/filter_list.dart';
class FilterPage extends StatefulWidget {
  const FilterPage({Key key, this.allTextList}) : super(key: key);
  final List<String> allTextList;
  @override
  _FilterPageState createState() => _FilterPageState();
}
class _FilterPageState extends State<FilterPage> {
  @override
  Widget build(BuildContext context) {
    List<String> countList = [
      "Art",
      "Mt",
      "P",
      "Pl"
   
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text("Filter list Page"),
      ),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: FilterListWidget(
                allTextList: countList,
                height: MediaQuery.of(context).size.height,
                hideheaderText: true,
                selectedTextBackgroundColor: Colors.red,
                applyButonTextBackgroundColor: Colors.red,
                allResetButonColor: Colors.grey,
                onApplyButtonClick: (list) {
                  //Navigator.pop(context, list);
                },
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min-Upvote',icons: Icons.favorite,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max-Upvote'),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min',icons: Icons.person_rounded,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max'),
                  ),
                ],
              ),
            ),
            Container(
                child: RaisedButton(child:Text(
                  'apply'
                ),),
              ),
          ],
        ),
      ),
    );
  }
}
class TexstInput extends StatelessWidget {
   TexstInput({
@required this.lable,this.icons
  }) ;
   IconData icons;
   String lable;
  @override
  Widget build(BuildContext context) {
    return TextField(
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
          icon: Icon(icons),
          contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
          labelText: lable,
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red, width: 5.0),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey, width: 0.8),
          )
      ),
    );
  }
}

main

import 'package:flutter/material.dart';
import 'filter.dart';



void main() async{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: false,
      home:FilterPage(),


    );
  }
}

Solution

Not 100% sure how you imagine your layout.
You plan to add more search tags? Change the flex values if you want to.
If you want to have your rows right under the FilterListWidget, than add mainAxisAlignment: MainAxisAlignment.start to second Column.

SafeArea(
    child: Column(
      children: [
        Flexible(
          flex: 2,
          child: FilterListWidget(
            allTextList: countList,
            hideheaderText: true,
            selectedTextBackgroundColor: Colors.red,
            applyButonTextBackgroundColor: Colors.red,
            allResetButonColor: Colors.grey,
            onApplyButtonClick: (list) {
              //Navigator.pop(context, list);
            },
          ),
        ),
        Flexible(
          flex: 3,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min-Upvote',icons: Icons.favorite,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max-Upvote'),
                  ),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min',icons: Icons.person,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max'),
                  ),
                ],
              ),
              Container(
                child: RaisedButton(child:Text(
                    'apply'
                ),),
              ),
            ],
          ),
        ),
      ],
    ),
  )

Answered By – JayJay

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *