Related
here is my the wiget with form
Widget verticalList = new ListView(
shrinkWrap: true,
children: [
Container(
color:Colors.white,
width: MediaQuery.of(context).size.width,
child: Form(
key: _formKey,
child:Column(
// shrinkWrap: true,
mainAxisSize:MainAxisSize.min,
children: [
textformField(),
textformField(),
textformField(),
textformField(),
textformField(),
........
.........
],
),
),
),
],
);
here below scaffold part full code
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.center,
stops: [0.0,1,1.2],
colors: <Color>[
Color(0xff19879a),
Color(0xff000e11),
Color(0xff000e02),
],
),
),
child: Column(
children:[
Container(
height: 160,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(flex:3,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FittedBox(child: Text("Firm Details",style: GoogleFonts.lato(color: Color(0xfffbfbfb),fontSize: 1.8*SizeConfig.textMultiplier))),
SizedBox(height: 0.5*SizeConfig.heightMultiplier,),
Padding(
padding: const EdgeInsets.only(left:30.0),
child: Text(
"Please select the category that best describes your business model.",
textAlign: TextAlign.right,
style: GoogleFonts.lato(
color: Color(0xffb3fbfbfb),
fontSize: 1.5*SizeConfig.textMultiplier),
),
),
],
),
),
),
Expanded(
flex: 2,
child: Container(
width: 10.0*SizeConfig.widthMultiplier,
height: 10.0*SizeConfig.heightMultiplier,
child: Image.asset(
"assets/images/firmDetail.png",
width: 10.0*SizeConfig.widthMultiplier,
height: 10.0*SizeConfig.heightMultiplier,
),
),
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.only(topLeft:Radius.circular(30),topRight: Radius.circular(30))
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(flex:1,child: horizontalList1),
Expanded(flex:5,child:verticalList,),
],
),
),)
]
)
),
);
please help i tried a lot nothing worked ,
is there any problem with my code
please help i tried a lot nothing worked ,
is there any problem with my code
keypad hides my textformfield dart flutter is there any solution, it tried a lot nothing worked
Wrap everything in a SingleChildScrollView widget and you can scroll when the keyboard is displayed.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Title'),
),
body: SingleChildScrollView(
child: _buildPage(),
),
);}
If you want the keyboard to hide when the user scrolls then wrap it all with NotificationListener<ScrollUpdateNotification>.
body: NotificationListener<ScrollUpdateNotification>(
onNotification: (notification) {
// dismiss keyboard on scroll if user initiated the scroll (ie dragDetails != null)
if (notification.dragDetails != null) {
FocusScope.of(context).unfocus();
}
return true;
},
child: SingleChildScrollView(
child: _buildPage(),
),
);
Wrap the form with this padding:
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom
),
)
Im trying to create the following layout within a flutter card within a list builder.. (colours are for display purpose only)
However, its ending up like :-
Ive tried multiple variations using Cross axis (Throws errors), stretch, Expanded etc, but unfortunately i'm not getting very far.
This is what i have so far :-
return Container(
child: Card(
margin: EdgeInsets.only(bottom: 20.0),
shape: ContinuousRectangleBorder(
side: BorderSide(
width: 1.0,
color: Colors.white10,
)),
elevation: 1.0,
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch, // add this
children: [
Image.memory(base64Decode(data[index].thumb_image),
// width: 300,
height: 150,
fit: BoxFit.fill),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('12hs 8mins'),
],
),
))
],
),
Text('1000')
],
),
),
),
);
Adding a container that encapsulates your red and blue widgets helps the case. I added a height of 50 on the container that encapsulates the widgets.
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Card(
margin: EdgeInsets.only(bottom: 20.0),
shape: ContinuousRectangleBorder(
side: BorderSide(
width: 1.0,
color: Colors.white10,
)),
elevation: 1.0,
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch, // add this
children: [
Expanded(
child: Container(
color: Colors.green,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Title',
textAlign: TextAlign.left,
),
Text('Description'),
],
),
),
),
Expanded(
child: Container(
// MediaQuery.of(context).size.width
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('12hs 8mins'),
],
),
))
],
),),
Text('1000')
],
),
),
),
),
);
}
}
Here's a solution with as much flexibility that I could think of:
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: Container(
color: Colors.green,
alignment: Alignment.center,
child: Text('Top'),
),
),
Container(
height: 100,
child: Row(
children: [
Flexible(
flex: 3,
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('Bottom Left'),
)
),
Flexible(
flex: 1,
child: Container(
color: Colors.orange,
alignment: Alignment.center,
child: Text('Bottom Right'),
),
),
],
),
)
],
);
}
}
Which will look like this:
I would like to do a scroll that the map part fixed on top, once i scroll up those widget can be overlay on top of the map.
i tried to do the scroll effect.
i use a stack with one container(the map) and one SingleChildScroll.
but the map is not able to tap after i put the SingleChildScroll on top of the map.
So is there any ways to made this out?
Any suggestions that i can do this design?
Thanks a lot!
This is the normal view
after i scroll up little bit
here is the code
return Scaffold(
key: _scaffoldKey,
backgroundColor: ThemeColors.orangeYellow,
floatingActionButton: Padding(
padding: EdgeInsets.only(right: 30),
child: Row(
children: [
_profileButton,
],
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
body: Stack(
children: [
Positioned(
top: 0,
child: Stack(
alignment: Alignment.bottomCenter,
overflow: Overflow.visible,
children: <Widget>[
Container(),
_map,
_nearbyRestaurantBox,
_getCurrentLocationButton,
],
),
),
SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(
children: <Widget>[
Column(
// alignment: Alignment.bottomCenter,
// overflow: Overflow.visible,
children: <Widget>[
// Container(),
// _map,
Padding(
padding: EdgeInsets.only(top: _mapHeight - 70),
),
Stack(
children: [
Column(
children: [
SizedBox(
height: 70,
// child: Container(
// // color: Colors.green,
// ),
),
SizedBox(
height: 70,
child: Container(
color: Colors.amber,
),
)
],
),
// Padding(
// padding: EdgeInsets.only(top: 35),
// ),
Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.only(top: 5),
child: _searchBox,
),
)
],
),
// Positioned(top: 0, child: _map),
// _searchBox,
// _nearbyRestaurantBox,
// _getCurrentLocationButton,
],
),
Container(
color: ThemeColors.orangeYellow,
child: Center(
child: Column(
children: <Widget>[
_categoryBox,
..._buildBanners(),
],
),
),
),
],
),
)
],
),
);
When the keyboard appears, the Flutter widgets resize. How to prevent this without using
resizeToAvoidBottomInset : false,
if I make it false then I can't see the TextFormField because the keyboard been above it
so waht to do?
here is my code
return Scaffold(
// resizeToAvoidBottomInset : false,
body: Center(
child: Stack(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/back_ui4.png',fit: BoxFit.fill,),
),
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 0.7*MediaQuery.of(context).size.height,),
TextFormField()
],
),
),
],
),
),
);
return Scaffold(
body: SingleChildScrollView(
child : Center(
child: Stack(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/back_ui4.png',fit: BoxFit.fill,),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 0.7*MediaQuery.of(context).size.height,),
TextFormField()
],
),
),
],
),
),
);
Theme(
data: Theme.of(context).copyWith(
canvasColor: ColorPallete().lightBlack,
),
child: Drawer(
child: ListView(
children: <Widget>[Column(
children: <Widget>[
Container(
height: 204.0,
child: DrawerHeader(
child: Stack(
children:<Widget>[
Center(
child: Column(
children: <Widget>[
DottedBorder(
padding: EdgeInsets.all(5.0),
borderType: BorderType.Circle,
color: ColorPallete().white,
child: Container(
height: 74.38,
width: 74.38,
child: CircleAvatar(
backgroundColor: Color(0xFFDADADA),
),
),
),
SizedBox(height: 11.0,),
Text('Иван Иванович Иванов',style: TextStyle(
fontSize: 14.0,color: ColorPallete().white
),)
],
),
),
Positioned(
bottom: 0,
right: 0,
child: Row(
children: <Widget>[
Text('Выйти',style: TextStyle(fontSize: 14.0,color: ColorPallete().yellow),),
SizedBox(width: 7.0,),
Icon(Icons.arrow_forward,color: ColorPallete().yellow,size: 18.0,),
],
),
)
]
),
),
),
Use a Container widget as your drawer, then a stack of your background image and the drawer's items should be the container's child.
Scaffold(
...,
drawer: Container(
child: Stack(
children: <Widget>[
Image.asset("myBackgroundImage.png"),
ListView(
children: <Widget>[
CircleAvater(),
ListTile(),
ListTile(),
...
],
),
],
),
),
);