How to remove space between keyboard and comment box in flutter? - flutter

I can't remove the space between the comment box and the keyboard.
Please see the below image for the issue
and below is my code
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Padding(
padding: const EdgeInsets.all(1.0),
child: SizedBox(
height: 48,
child: TextFormField(
decoration: InputDecoration(
suffixIcon: SizedBox(
width: 90,
child: Padding(
padding: const EdgeInsets.all(13.0),
child: Row(
children: [
const SizedBox(width: 40),
RichText(
text: const TextSpan(children: [
WidgetSpan(
child: SizedBox(
height: 20,
width: 20,
child: Icon(
Icons.send_outlined,
color: AppColors.appColor0,
)),
)
])),
],
),
),
),
),
),
),
),
Please tell me what mistake I am doing. thank you.

You should set resizeToAvoidBottomInset: false and dynamically add your padding based on is keyboad open or not. Something like this:
#override
Widget build(BuildContext context) {
bool isKeyboardOpen = MediaQuery.of(context).viewInsets.bottom > 0;
return Scaffold(
resizeToAvoidBottomInset: false,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Padding(
padding: isKeyboardOpen
? EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
: const EdgeInsets.all(1.0),
child: SizedBox(
height: 48,
child: TextFormField(
decoration: InputDecoration(
suffixIcon: SizedBox(
width: 90,
child: Padding(
padding: const EdgeInsets.all(13.0),
child: Row(
children: [
// Image.asset("assets/images/home_icon/mic.png"),
const SizedBox(width: 40),
RichText(
text: const TextSpan(children: [
WidgetSpan(
child: SizedBox(
height: 20,
width: 20,
child: Icon(
Icons.send_outlined,
)),
)
])),
// Image.asset("assets/images/home_icon/send.png"),
],
),
),
),
prefixIcon: Padding(
padding: const EdgeInsets.all(13.0),
child: RichText(
text: const TextSpan(children: [
WidgetSpan(
child: SizedBox(
height: 20,
width: 20,
child: Icon(
Icons.photo_camera_outlined,
)),
)
])),
),
hintText: 'Add comments...',
// hintStyle: NewStyles.textValueGreyR14,
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.symmetric(horizontal: 30, vertical: 0),
focusedBorder: OutlineInputBorder(
// borderSide: const BorderSide(color: AppColors.appColor2),
borderRadius: BorderRadius.circular(100),
),
enabledBorder: OutlineInputBorder(
// borderSide:
// const BorderSide(color: ApplicationColors.chatBGcolorEE),
borderRadius: BorderRadius.circular(100),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Theme.of(context).errorColor),
borderRadius: BorderRadius.circular(100),
),
),
),
),
),
body: SafeArea(
child: SizedBox(),
),
);
}

Related

Cursor and text not showing in TextField Flutter

When I click on the TextField, my cursor and the text I type in the text field are not displayed. It seems that I do everything as always, but for some reason nothing is displayed. Please tell me what could be my mistake?
body
Padding(
padding: const EdgeInsets.symmetric(horizontal: 13),
child: SizedBox(
height: 45,
child: MySearchWidget(
onChanged: (value) => _runFilter(value),
),
),
),
MySearchWidget
Widget build(BuildContext context) {
return Row(
children: [
IconButton(
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
onPressed: () {
_onBackPressed(context);
},
icon: SvgPicture.asset(
constants.Assets.arrowLeft,
),
),
const SizedBox(
width: 14,
),
Expanded(
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 14),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: constants.Colors.greyDark,
),
child: TextFormField(
onChanged: onChanged,
style: constants.Styles.textFieldTextStyleWhite,
cursorColor: Colors.white,
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 15,
),
border: InputBorder.none,
prefixIcon: Align(
alignment: Alignment.centerLeft,
child: SvgPicture.asset(
constants.Assets.search,
width: 20,
height: 20,
),
),
),
),
),
),
],
);
}
Remove the Align widget wrapping your prefixIcon.
TextFormField(
onChanged: onChanged,
style: constants.Styles.textFieldTextStyleWhite,
cursorColor: Colors.white,
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 15,
),
border: InputBorder.none,
prefixIcon: FittedBox(
fit: BoxFit.scaleDown,
child: SvgPicture.asset(
'assets/svg/logo.svg',
width: 20,
height: 20,
),
),
),

How to design shadow with border look like below image using flutter?

How I design UI as like as below image using flutter,
Design page
import 'package:flutter/material.dart';
import 'package:shaon_project/themes/light_color.dart';
import '../wigets/apply_form.dart';
class ApplyNewScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [LightColor.docBackStart, LightColor.docBackEnd])),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: const Text('Apply New'),
),
body: Center(
child: Container(
height: 430,
width: 310,
child: Stack(
children: [
Positioned(
top: 20,
left: 10,
child: SizedBox(
height: 410,
width: 300,
child: Card(
color: LightColor.cardBottomColor,
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
side: BorderSide(color: Colors.white, width: 3),
),
),
),
),
SizedBox(
height: 420,
width: 300,
child: Card(
color: Colors.white,
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
side: BorderSide(color: Colors.white, width: 3),
),
child: ApplyForm(),
),
),
],
),
),
),
),
);
}
}
Form page:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ApplyForm extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
children: \[
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'University Name',
),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Course Type',
),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Course Module',
),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Your IELTS Score',
),
),
SizedBox(
height: 20,
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: RichText(
text: const TextSpan(
text: 'Status: ',
style: TextStyle(fontWeight: FontWeight.bold),
children: <TextSpan>\[
TextSpan(
text: 'Eligible',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.teal)),
\],
),
),
),
),
SizedBox(
height: 20,
),
Column(
children: \[
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // background
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
), // foreground
onPressed: () {},
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Text(
'Apply',
style: TextStyle(fontSize: 20),
),
),
)
\],
)
\],
);
}
}

Textfields shrinking whenever keyboard appears in flutter

I am trying to create an simple login form, there are 3 components in a column: row and 2 text fields.
The row contains an image and text.
The problem is whenever the keyboard appears while I want to type something in the textfield, all UI is shrinking.
I have attached before and after keyboard appears
How to make it such that whenever keyboard appears the elements hidden below the keyboard?
Here is my code:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Flexible(
fit: FlexFit.tight,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Padding(
padding: EdgeInsets.only(top: 50),
child: Hero(
tag: "logo",
child: Image.asset(
"images/flash.png", width: 70, height: 50,)
),
),
),
Flexible(
child: Padding(
padding: EdgeInsets.only(top: 50),
child: Text(
"Demo Chat",
style: TextStyle(
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.bold
),
),
),
)
],
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 50,
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: kTextFieldDecorationEmail,
keyboardType: TextInputType.emailAddress,
),
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 50,
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: kTextFieldDecorationPassword,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
),
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 70,
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: EdgeInsets.all(20),
child: MaterialButton(
color: Colors.blueAccent,
onPressed: (){},
height: 50,
child: Text(
"Login",
style: TextStyle(
color: Colors.black
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
),
),
)
],
),
That is because you are using flexible with FlexFit.tight, this allows it to fit into screen regardless of the size. I would suggest you to use MediaQuery or some other field for this to tackle. An example to eliminate this would be something like this. I have edited your code a slight bit since I do not have the image and decoration at the moment which you are using I have put in some random one for the time being.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 50),
child: Text(
"Demo Chat",
style: TextStyle(
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.bold),
),
)
],
),
SizedBox(
height: 50,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Username',
filled: true,
fillColor: Colors.grey,
contentPadding:
const EdgeInsets.only(left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
keyboardType: TextInputType.emailAddress,
),
),
SizedBox(
height: 50,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Password',
filled: true,
fillColor: Colors.grey,
contentPadding:
const EdgeInsets.only(left: 14.0, bottom: 6.0, top: 8.0),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
),
keyboardType: TextInputType.visiblePassword,
obscureText: true,
),
),
Flexible(
fit: FlexFit.tight,
child: SizedBox(
height: 70,
),
),
Padding(
padding: EdgeInsets.all(20),
child: MaterialButton(
color: Colors.blueAccent,
onPressed: () {},
height: 50,
child: Text(
"Login",
style: TextStyle(color: Colors.black),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
),
)
],
),
),
);
}
}
Screen:

Not able to make Scrollable

I am new in flutter and I try to make scrollable UI.
I try to add Expanded widgets, ListViews Widgets , SingleChildScrollView widgets but didn't get the expected result.
Also, I try to wrap the stack inside Container and then inside SingleChildScrollView. But it throws error.
I tried many aspects to make my homepage scrollable. But, I got errors (Mentioned below)
I/flutter ( 6259): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#e1279 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 6259): Another exception was thrown: RenderBox was not laid out: _RenderColoredBox#89cc6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 6259): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#9505f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 6259): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 549 pos 12: 'child.hasSize': is not true.
GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
new TextEditingController().clear();
},
child: Stack(
children: <Widget>[
Container(
height: 200,
child: TopBar(),
),
Container(
margin: EdgeInsets.only(top: 55),
child: Text(
"PriceTrackers",
style: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w900,
),
),
),
Container(
margin: EdgeInsets.fromLTRB(265, 0, 0, 0),
child: Text(
".",
style: TextStyle(
fontSize: 120,
color: Colors.white,
),
)),
ListView(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 200),
child: Form(
key: _formKey,
child: Column(children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.store),
Text(
"Supported Store",
style: TextStyle(
fontSize: 20,
color: Colors.green,
),
),
Image.asset(
"Assets/img/amazon.png",
width: 20,
),
Image.asset(
"Assets/img/flipkart.png",
width: 20,
),
Image.asset(
"Assets/img/ajio.png",
width: 20,
),
Image.asset(
"Assets/img/snapdeal.png",
width: 20,
),
Image.asset(
"Assets/img/ss.jpg",
width: 20,
),
],
),
margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
// boxShadow: [
// BoxShadow(color: Colors.white, spreadRadius: 3),
// ],
),
),
// Add TextFormFields and RaisedButton here.
TextFormField(
controller: _controller,
enableInteractiveSelection: true,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(20),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
borderRadius: BorderRadius.circular(20),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(20),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(20),
),
hintText: "Enter Product URL",
suffixIcon: Icon(Icons.search),
),
// onFieldSubmitted: (term){
// FocusScope.of(context).unfocus();
// _controller.clear();
// },
showCursor: true,
autofocus: false,
// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
} else if (!value.contains("amazon") ||
!value.contains("flipkart") ||
!value.contains("myntra")) {
return "Please Enter Supported Store URL";
}
return null;
},
),
RaisedButton.icon(
icon: Icon(
Icons.search,
color: Colors.white,
),
color: Colors.black,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
elevation: 20.0,
onPressed: () async {
// Validate returns true if the form is valid, otherwise false.
if (_formKey.currentState.validate()) {
setState(() {
createAlbum(_controller.text).then((value) => {
Navigator.push(
context,
EnterExitRoute(
exitPage: HomePage(),
enterPage: LineChartSample2(
getData: value)))
});
});
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
'Processing Data',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.green,
));
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => LineChartSample2()),
// );
}
},
label: Text(
'View Price Graph',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(top: 20),
width: 380,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.blue[200],
blurRadius: 25.0, // soften the shadow
spreadRadius: 5.0, //extend the shadow
offset: Offset(
15.0, // Move to right 10 horizontally
15.0, // Move to bottom 10 Vertically
),
)
],
),
child: Row(
children: <Widget>[
Container(
width: 130,
height: 130,
padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
child: FadeInImage(
fit: BoxFit.scaleDown,
// here `bytes` is a Uint8List containing the bytes for the in-memory image
placeholder: AssetImage("Assets/img/bag.png"),
image: NetworkImage(
'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),
),
),
Expanded(
child: Container(
padding: EdgeInsets.fromLTRB(0, 20, 10, 0),
child: Column(
children: <Widget>[
Text(
"Redux Analogue Blue Dial Men’s &S... ",
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
color: Colors.black),
),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
children: <Widget>[
OutlineButton.icon(
onPressed: () => {},
icon: Icon(Icons.shopping_basket),
label: Text("But Now #28939")),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"Avg Price : 7,98,374",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w900,
),
),
Text(
"Avg Price :34,43,343",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w900,
),
)
],
),
Container(
margin: EdgeInsets.all(5),
),
FlatButton.icon(
icon: Icon(Icons.show_chart),
color: Colors.black,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.fromLTRB(
20, 5, 20, 5),
splashColor: Colors.blueAccent,
onPressed: () {
/*...*/
},
label: Text(
"Show Price Graph",
style: TextStyle(fontSize: 15.0),
),
)
],
)),
],
),
))
],
),
),
])),
),
],
),
Container(
margin: EdgeInsets.only(top: 650),
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
)),
],
));
You can copy paste run full code below
Step 1: Use LayoutBuilder and ConstrainedBox
return LayoutBuilder(builder: (context, constraints) {
...
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: double.infinity),
child: Stack(
Step 2: Change ListView to Column
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Column(
Step 3: GridView use shrinkWrap: true
working demo
full code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
TextEditingController().clear();
},
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: double.infinity),
child: Stack(
children: <Widget>[
Container(
height: 200,
child: Text("TopBar()"),
),
Container(
margin: EdgeInsets.only(top: 55),
child: Text(
"PriceTrackers",
style: TextStyle(
color: Colors.black,
fontSize: 50.0,
fontWeight: FontWeight.w900,
),
),
),
Container(
margin: EdgeInsets.fromLTRB(265, 0, 0, 0),
child: Text(
".",
style: TextStyle(
fontSize: 120,
color: Colors.white,
),
)),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 200),
child: Form(
//key: _formKey,
child: Column(children: <Widget>[
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.store),
Text(
"Supported Store",
style: TextStyle(
fontSize: 20,
color: Colors.green,
),
),
Image.network(
'https://picsum.photos/250?image=9',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=10',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=11',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=12',
width: 20,
),
Image.network(
'https://picsum.photos/250?image=13',
width: 20,
),
],
),
margin: EdgeInsets.fromLTRB(40, 10, 40, 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
// boxShadow: [
// BoxShadow(color: Colors.white, spreadRadius: 3),
// ],
),
),
// Add TextFormFields and RaisedButton here.
TextFormField(
//controller: _controller,
enableInteractiveSelection: true,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(20),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
borderRadius: BorderRadius.circular(20),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(20),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(20),
),
hintText: "Enter Product URL",
suffixIcon: Icon(Icons.search),
),
// onFieldSubmitted: (term){
// FocusScope.of(context).unfocus();
// _controller.clear();
// },
showCursor: true,
autofocus: false,
// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
} else if (!value.contains("amazon") ||
!value.contains("flipkart") ||
!value.contains("myntra")) {
return "Please Enter Supported Store URL";
}
return null;
},
),
RaisedButton.icon(
icon: Icon(
Icons.search,
color: Colors.white,
),
color: Colors.black,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
elevation: 20.0,
onPressed: () async {
// Validate returns true if the form is valid, otherwise false.
},
label: Text(
'View Price Graph',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(top: 20),
width: 380,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.blue[200],
blurRadius: 25.0,
// soften the shadow
spreadRadius: 5.0,
//extend the shadow
offset: Offset(
15.0,
// Move to right 10 horizontally
15.0, // Move to bottom 10 Vertically
),
)
],
),
child: Row(
children: <Widget>[
Container(
width: 130,
height: 130,
padding:
EdgeInsets.fromLTRB(5, 10, 5, 10),
child: FadeInImage(
fit: BoxFit.scaleDown,
// here `bytes` is a Uint8List containing the bytes for the in-memory image
placeholder: NetworkImage(
"https://picsum.photos/250?image=9"),
image: NetworkImage(
'https://images-na.ssl-images-amazon.com/images/I/81j14WXbc%2BL._UL1500_.jpg'),
),
),
Expanded(
child: Container(
padding:
EdgeInsets.fromLTRB(0, 20, 10, 0),
child: Column(
children: <Widget>[
Text(
"Redux Analogue Blue Dial Men’s &S... ",
maxLines: 2,
softWrap: true,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
color: Colors.black),
),
Container(
margin: EdgeInsets.fromLTRB(
0, 10, 0, 0),
child: Column(
children: <Widget>[
OutlineButton.icon(
onPressed: () => {},
icon: Icon(Icons
.shopping_basket),
label: Text(
"But Now #28939")),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Text(
"Avg Price : 7,98,374",
style: TextStyle(
fontSize: 10,
fontWeight:
FontWeight.w900,
),
),
Text(
"Avg Price :34,43,343",
style: TextStyle(
fontSize: 10,
fontWeight:
FontWeight.w900,
),
)
],
),
Container(
margin: EdgeInsets.all(5),
),
FlatButton.icon(
icon:
Icon(Icons.show_chart),
color: Colors.black,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor:
Colors.black,
padding:
EdgeInsets.fromLTRB(
20, 5, 20, 5),
splashColor:
Colors.blueAccent,
onPressed: () {
/*...*/
},
label: Text(
"Show Price Graph",
style: TextStyle(
fontSize: 15.0),
),
)
],
)),
],
),
))
],
),
),
])),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 650),
child: GridView.count(
shrinkWrap: true,
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text(
"He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.teal[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.teal[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.teal[600],
),
],
)),
],
),
),
)),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
});
}
}
You need to remove height from container.
SingleChildScrollView(
child: Container(
child: Stack(
children: <Widget>[
])))

Flutter :- How to scroll the sceen without shrink the screen on the Stack view?(Scroll the the whole screen when the keyboard appears )

Description I am creating the login screen in which I have used the Stack widget, Currently, everything works fine but only one issue of the shrinking the view. When I use the resizeToAvoidBottomPadding: false inside the Scaffold then screen shrinking disappear but another problem arise that whole screen scroll not working, please check below lines of code
class _LoginScreen extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
));
}
}
From Above code, I am getting the following screen
I have used the ListView and SingleChildScrollView but it not working properly, please check my code with SingleChildScrollView, which i have tried
class _LoginScreen extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
child: IntrinsicHeight(
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
)),
));
}
}
And From the above code getting this result by using the SingleChildScrollView
Problem:- I want to scroll the whole screen when the keyboard appears, I have used all the Listview and SingleChildScrollView but not getting the solution, please help me on it. Thanks
The problem is you're using Expanded widgets, you see expanded widgets are flexible in nature they will consume and shrink according to the available space. If you don't want that you need to specify a height.
https://i.imgur.com/wVgAUlN.mp4
class StacScroll extends StatefulWidget {
StacScroll({Key key}) : super(key: key);
#override
_StacScrollState createState() => _StacScrollState();
}
class _StacScrollState extends State<StacScroll> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
height: double.infinity,
width: double.infinity,
// margin:
// EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style:
TextStyle(fontSize: 30.0, color: Colors.white),
),
),
)),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(
fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
),
],
),
),
));
}
}
Thanks #Nadeem by which problem has resolved
Whenever we want to scroll the full screen when keyboard appear then we should not use the Expand widget for it.I was also doing the same mistake, for the other user i have modified the code for full scroll when keyboard appear, I have used the MediaQuery for it,Please check my below code of it.
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _LoginScreen();
}
}
class _LoginScreen extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Login"),
),
body: Container(
height: double.infinity,
width: double.infinity,
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.59,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Container(
margin: EdgeInsets.only(top: 70.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Enter your username')),
TextFormField(
decoration: InputDecoration(labelText: 'Password')),
SizedBox(
height: 20.0,
),
RaisedButton(
color: Colors.yellow,
child: Text("Submit",
style: TextStyle(color: Colors.blue)),
onPressed: () {},
)
],
),
)),
Center(
child: Card(
color: Colors.yellow,
elevation: 8,
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * .25),
child: Container(
child: Center(
child: Text(
"Radhe",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
)),
height: MediaQuery.of(context).size.height * .1,
width: MediaQuery.of(context).size.width * .3,
),
),
)
],
),
),
),
);
}
}
Please check the output of it.