resizeToAvoidBottomInset : false Doesn't Work in CurvedNavigationBar Flutter - flutter

I struggle with flutter CurvedNavigationBar.
Every time keyboard appears, CurvedNavigationBar sticks on Top of the keyboard.
I found many & different answers for this issue, but nothing worked for me.
I added resizeToAvoidBottomInset : false inside my Scafold, with no luck.
Any suggestions, please?
Thanks in advance!
**This is a part of my code
var pagesAll = [
SignUpScreen(),
HomeScreen(),
OtherScreen()
];
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: _page,
height: 60.0,
items: <Widget>[
Icon(Icons.perm_identity, size: 30),
Icon(Icons.home, size: 30),
Icon(Icons.message, size: 30),
],
color: Colors.white,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
setState(() {
_page = index;
});
},
letIndexChange: (index) => true,
),
body: pagesAll[_page]);
}
/* Also the Sign up Sceen */
Widget initWidget() {
return Scaffold(
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 250,
decoration: BoxDecoration(
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(90)),
color: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.only(left: 20, right: 20, top: 70),
padding: EdgeInsets.only(left: 20, right: 20),
height: 54,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.grey[200],
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: Color(0xffEEEEEE)),
],
),
child: TextField(
controller: fullName,
cursorColor: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
decoration: InputDecoration(
icon: Icon(
Icons.person,
color: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
),
hintText: "Full Name",
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.only(left: 20, right: 20, top: 20),
padding: EdgeInsets.only(left: 20, right: 20),
height: 54,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.grey[200],
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: Color(0xffEEEEEE)),
],
),
child: TextField(
controller: email,
cursorColor: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
decoration: InputDecoration(
icon: Icon(
Icons.email,
color: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
),
hintText: "Email",
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),) }

Finally, thanks to #john, I realised that I didn't include resizeToAvoidBottomInset : false in a parent wigdet Scafold.

Related

Change color of focused border on email validation Flutter

i'm trying to reach something like that with Flutter
Anybody has an idea how can i reach that, i was trying with getx and email validation packages but it s not working.
Getx and Email validation package
Widget build(BuildContext context) {
var email = false.obs;
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Container(
height: height / 4,
width: width / 1.3,
color: Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
alignment: Alignment.center,
height: 50,
width: width / 1.3,
color: Colors.transparent,
child: GestureDetector(
onTap: () {
setState(() {
onTaps = !onTaps;
});
},
child: Container(
alignment: Alignment.center,
height: 50,
child: Form(
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Obx(
() => TextFormField(
onChanged: (asd) {
if (EmailValidator.validate(asd)) {
email(true);
} else {
email(false);
}
},
keyboardType: TextInputType.emailAddress,
textAlign: TextAlign.start,
controller: _emailcontroller,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: email.value ? Colors.amber : Colors.red,
width: 2),
),
suffixIcon: _emailcontroller.text.isEmpty
? Container(
height: 0,
width: 0,
)
: GestureDetector(
onTap: () => _emailcontroller.clear(),
child: Icon(
Icons.clear,
size: 20,
color: Color.fromARGB(
255,
128,
128,
128,
),
),
),
filled: true, //<-- SEE HERE
fillColor: Color.fromARGB(255, 164, 164, 164),
hintText: "Your phone number or Email",
hintStyle: TextStyle(
color: Color.fromARGB(
255,
128,
128,
128,
),
),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
width: 0.4,
),
borderRadius: BorderRadius.circular(8.0),
),
),
),
),
),
),
),
),

Make Container take content size of child

I'm new in Flutter,
I have a Container which child is Stack that using Positioned inside.
My problem is Container just taking Non-Positioned widget size.
Here is my problem:
I want something like this:
Here is my Widget code:
class CheckUpItem extends StatelessWidget {
const CheckUpItem({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return SizedBox(
width: 100,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Colors.white,
border: Border.fromBorderSide(
BorderSide(
width: 1,
color: Color(0xFFBAD9F8),
),
),
boxShadow: [
BoxShadow(
color: Color(0x00000029),
offset: Offset(2, 3),
blurRadius: 2,
),
],
),
child: Column(
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(4),
topRight: Radius.circular(4),
),
child: Container(
decoration: const BoxDecoration(
color: Color(0xFFE6F6FF),
border: Border(
bottom: BorderSide(
width: 1,
color: Color(0xFFBAD9F8),
),
),
),
child: Consumer(
builder: (context, ref, child) {
return Center(
child: Text(
'BMI',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
height: 1.43,
color: Color(0xFF6B6B6B),
),
),
);
},
),
),
),
Container(
padding: const EdgeInsets.only(top: 5.5, bottom: 4),
child: Column(
children: [
Stack(
clipBehavior: Clip.none,
children: [
Container(
width: 36,
height: 36,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.fromBorderSide(
BorderSide(
width: 2,
color: Color(0xFFBF3D3D),
),
),
color: Color(0xFFF86060),
),
child: const Center(
child: Text(
'B',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
height: 1,
fontSize: 20,
),
),
),
),
Positioned(
bottom: -6,
left: 26,
child: Container(
width: 22,
height: 22,
padding: const EdgeInsets.fromLTRB(1, 0, 3, 2),
decoration: const BoxDecoration(
border: Border.fromBorderSide(
BorderSide(
width: 1,
color: Color(0xFF6A8FD4),
),
),
color: Color(0xFFE0EEFC),
shape: BoxShape.circle,
),
child: SvgPicture.asset(ImageAssets.speaker),
),
),
],
),
const SizedBox(height: 6),
],
),
),
],
),
),
);
}
}
I'm stucking all day with this, I'm tempary using Column and const SizedBox(height: 6) for fake height.
How to make it right way?
P/s: Sorry, my English is not good!
Because every thing is static hear and you know how much the svg container going down, you can calculate it and add it to padding bottom, like this:
Container(
padding: const EdgeInsets.only(top: 5.5, bottom: 10), // 4 + 6(Positioned bottom)
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
width: 36,
height: 36,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.fromBorderSide(
BorderSide(
width: 2,
color: Color(0xFFBF3D3D),
),
),
color: Color(0xFFF86060),
),
child: const Center(
child: Text(
'B',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
height: 1,
fontSize: 20,
),
),
),
),
Positioned(
bottom: -6,
left: 26,
child: Container(
height: 22,
width: 22,
decoration: const BoxDecoration(
border: Border.fromBorderSide(
BorderSide(
width: 1,
color: Color(0xFF6A8FD4),
),
),
color: Color(0xFFE0EEFC),
shape: BoxShape.circle,
),
child: SvgPicture.asset(
'assets/images/tes.svg',
),
),
),
],
),
),

Set state for variable error; This widget has been unmounted, so the State no longer has a context (and should be considered defunct)

I'm fairly new to Flutter and I have a page where I take in two inputs in a search fieldstone them in different variables(_selectedYear and _selectedSem) and based on the inputs I create a url.
On creating the two search fields and running it , if I input in the second field before the first one, I have no error but if I input in the first field before the second field this error pops up.
This widget has been unmounted, so the State no longer has a context (and should be
considered defunct). Consider canceling any active work during dispose or using the getter mounted to determine if the state is still active.
Here's a screenshot of the page:
Here is the code.
class _TestrState extends State<Testr> {
String _selectedYear;
String _selectedSem;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: const Text(
'Testr',
style: TextStyle(
color: Colors.black,
),
),
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.bottomRight,
colors: [Colors.green, Colors.limeAccent])),
),
),
body: Container(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.64,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
'Select a Year',
style: TextStyle(fontSize: 16, color: Colors.blueGrey),
),
),
Container(
width: double.infinity,
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
blurRadius: 10,
offset: const Offset(0, 10),
),
],
),
child: SearchField(
hint: 'Search for Year',
searchInputDecoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueGrey.shade200,
width: 1,
),
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
color: Colors.blue.withOpacity(0.8),
),
borderRadius: BorderRadius.circular(10),
),
),
maxSuggestionsInViewPort: 4,
itemHeight: 50,
suggestionsDecoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
onTap: (value) {
setState(() {
_selectedYear = value;
});
if (kDebugMode) {
print(value);
}
},
suggestions: const [
'Year One',
'Year Two',
'Year Three',
'Year Four',
],
),
),
const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
'Select a Semester',
style: TextStyle(fontSize: 16, color: Colors.blueGrey),
),
),
Container(
width: double.infinity,
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
blurRadius: 10,
offset: const Offset(0, 10),
),
],
),
child: SearchField(
hint: 'Search for Semester',
searchInputDecoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueGrey.shade200,
width: 1,
),
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
color: Colors.blue.withOpacity(0.8),
),
borderRadius: BorderRadius.circular(10),
),
),
maxSuggestionsInViewPort: 4,
itemHeight: 50,
suggestionsDecoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
onTap: (value) {
setState(() {
_selectedSem = value;
});
if (kDebugMode) {
print(value);
}
},
suggestions: const [
'Afghanistan',
'Turkey',
'Germany',
'France',
'Italy',
],
),
),
],
),
),
Container(
height: 90,
padding: const EdgeInsets.only(right: 20, left: 20, bottom: 20),
decoration: const BoxDecoration(
color: Colors.white,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_selectedYear == null
? const Text(
'Select a Year and a Semester to Continue',
style:
TextStyle(fontSize: 14, color: Colors.blueGrey),
)
: Text(_selectedYear + "->" + _selectedSem,
style: TextStyle(
fontSize: 16,
color: Colors.grey.shade800,
fontWeight: FontWeight.w600)),
MaterialButton(
onPressed: () {
CreateURL(_selectedYear, _selectedSem);
},
color: Colors.black,
minWidth: 50,
height: 50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
padding: const EdgeInsets.all(0),
child: const Icon(
Icons.arrow_forward_ios,
color: Colors.blueGrey,
size: 24,
),
)
],
),
)
],
),
),
),
);
}
}
Ive tried placing the setstate in an 'if(mounted)' and that didn't work after looking at other similar questions.
i just changed the variables initialization and it worked.
String _selectedYear = "";
String _selectedSem = "";
and also added this logic to the setState
setState(() {
_selectedSem = value!;
});
this did the trick for me, try it out and see
I'm not sure but once you try this way. first, initialize value to a variable and then refresh state
_selectedYear = value!;
setState(() {});
or if you are using flutter version 2.5.3 or higher then you need to initialize variable or migrate to null safety.

How to make TextField's label wont move when out of focus in Flutter

I'm new to flutter.
I'm trying to replicate the following UI, it has multiple TextField and all of their labels won't maximize when I click on other TextField, they keep on focus to show the content inside it: https://i.stack.imgur.com/8lUeV.png
The UI I made: https://i.stack.imgur.com/o9Rpj.png
I tried the autofocus: on but it didn't work cuz it only work for one TextField at a time.
My code:
import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';
class EmployeeProfile extends StatefulWidget {
const EmployeeProfile({Key? key, required this.user}) : super(key: key);
final User user;
#override
_EmployeeProfileState createState() => _EmployeeProfileState();
}
class _EmployeeProfileState extends State<EmployeeProfile> {
late String name = '';
late String email = '';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.blue])),
height: MediaQuery.of(context).size.height * 0.3
),
Card(
elevation: 20.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
child: ListView(
children: <Widget>[
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
name = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Name',
hintText: widget.user.name,
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
email = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Email',
hintText: widget.user.email,
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
TextButton(
onPressed: (){
print(widget.user.name);
print(widget.user.email);
setState(() {
widget.user.name = name;
widget.user.email = email;
});
},
child: const Text('Save'),
),
],
)
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(// Add AppBar here only
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text(
widget.user.name.toString(),
style: const TextStyle(
letterSpacing: 0.0,
fontSize: 20.0,
),
),
),
),
],
),
);
}
}
P/s: sr im not really good at English to describe it correctly
Label will be visible if you focus on the TextField or TextField has content. If what you mean is keeping the label always be visible, you can add floatingLabelBehavior: FloatingLabelBehavior.always on InputDecoration.
import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';
class EmployeeProfile extends StatefulWidget {
const EmployeeProfile({Key? key, required this.user}) : super(key: key);
final User user;
#override
_EmployeeProfileState createState() => _EmployeeProfileState();
}
class _EmployeeProfileState extends State<EmployeeProfile> {
late String name = '';
late String email = '';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.blue])),
height: MediaQuery.of(context).size.height * 0.3
),
Card(
elevation: 20.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
child: ListView(
children: <Widget>[
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
name = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Name',
hintText: widget.user.name,
// add here
floatingLabelBehavior: FloatingLabelBehavior.always
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
email = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Email',
hintText: widget.user.email,
// add here
floatingLabelBehavior: FloatingLabelBehavior.always
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
TextButton(
onPressed: (){
print(widget.user.name);
print(widget.user.email);
setState(() {
widget.user.name = name;
widget.user.email = email;
});
},
child: const Text('Save'),
),
],
)
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(// Add AppBar here only
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text(
widget.user.name.toString(),
style: const TextStyle(
letterSpacing: 0.0,
fontSize: 20.0,
),
),
),
),
],
),
);
}
}
Try below code hope its helpful to you. add your ListView() inside Padding
Padding(
padding: EdgeInsets.all(20),
child: ListView(
children: <Widget>[
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val) {},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Name',
hintText: 'widget.user.name',
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 107, 106, 144),
width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
SizedBox(
height: 20,
),
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val) {},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Email',
hintText: 'widget.user.email',
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 107, 106, 144),
width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
TextButton(
onPressed: () {},
child: const Text('Save'),
),
],
),
),
Your Screen->

Flutter giving me massive migraine : "positional arguments must occur before named arguments"

Throws error # Scaffold saying too many positional arguments, and another # Padding saying positional arguments must occur before named arguments.
import 'package:flutter/material.dart';
void main() =>
runApp(MaterialApp
(debugShowCheckedModeBanner: false,
home: LoginScreen()
)
);
class LoginScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Column(
children: <Widget>[
Container(
height: 260,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/RightLogo.jpg"),
fit: BoxFit.fill))),
Positioned(
child: Container(
margin: EdgeInsets.only(top: 25),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.blue,
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
),
)
],
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(143, 148, 251, .8),
blurRadius: 20.0,
offset: Offset(0, 10)
)
]
),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[100]))
),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "User Name/Login",
hintStyle: TextStyle(color: Colors.grey[400])
),
)
),
Container(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey[400])
),
)
)
],
),
),
SizedBox(height: 30,),
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: [
Color.fromRGBO(143, 148, 251, 1),
Color.fromRGBO(143, 148, 251, .6),
]
)
),
)
])
),
);
}
}
So what's the reason? I know its a mistake by me but I'd appreciate it if someone pointed out the flaw. Also the rest of the code is probably useless.
Edited after comment about missing code. Sorry for inconvenience.
That's because your padding is not inside of your column widget's children list. It is used as a positional argument to scaffold.
Simply ctrl + x your padding and paste it into column's children.
Column(
children: <Widget>[
Container(
height: 260,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/RightLogo.jpg"),
fit: BoxFit.fill))),
Positioned(
child: Container(
margin: EdgeInsets.only(top: 25),
child: Center(
child: Text(
"Login",
style: TextStyle(
color: Colors.blue,
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: Column(children: <Widget>[
Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(143, 148, 251, .8),
blurRadius: 20.0,
offset: Offset(0, 10))
]),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey[100]))),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "User Name/Login",
hintStyle:
TextStyle(color: Colors.grey[400])),
)),
Container(
padding: EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Password",
hintStyle:
TextStyle(color: Colors.grey[400])),
))
],
),
),
SizedBox(
height: 30,
),
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(colors: [
Color.fromRGBO(143, 148, 251, 1),
Color.fromRGBO(143, 148, 251, .6),
])),
)
])),
],
),