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?!
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(),
);
}
}
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'
),),
),
],
),
),
],
),
)