Flutter: bottom widget when keyboard is displayed - flutter

It looks fine when the keyboard is hidden but when displayed the container is on top of it and it should be behind (not related to the content of the container):
SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
)

If you use Scaffold above your code, change it with Material widget, and the problem will gone. Just like this:
return Material(
child: SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
),
);

Related

keypad hides my textformfield dart flutter is there any solution, it tried a lot nothing worked

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
),
)

Flutter layout within a card

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:

Flutter - Scroll with a fixed widget

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(),
],
),
),
),
],
),
)
],
),
);

How to prevent Flutter widgets resize When the keyboard appears?

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()
],
),
),
],
),
),
);

How to set the background image instead of canvasColor for whole drawer?

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(),
...
],
),
],
),
),
);