TextField gets hidden when the keyboard pops in

TextField gets hidden when the keyboard pops in - android

import 'package:e_expense/home.dart';
import 'package:flutter/material.dart';
class SignUpPage extends StatefulWidget {
#override
_SignUpState createState() => _SignUpState();
}
class _SignUpState extends State<SignUpPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.green,
),
centerTitle: true,
title: Text(
"Welcome to E-Expense",
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
color: Colors.green),
),
elevation: 0.0,
backgroundColor: Color(0x00000000).withOpacity(0),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
fit: FlexFit.loose,
child: Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(15.0, 50.0, 0.0, 0.0),
child: Text(
"Signup",
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
),
),
Container(
padding: EdgeInsets.fromLTRB(270.0, 50.0, 0.0, 0.0),
child: Text(
".",
style: TextStyle(
color: Colors.green,
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'USER NAME',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'REPEAT PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 40.0),
ButtonBar(
alignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
onPressed: () {},
child: Text(
'CANCEL',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.normal,
color: Colors.black,
),
)),
RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => HomePage(),
fullscreenDialog: false));
},
color: Colors.green,
child: Text(
'SIGNUP',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 15.0),
),
textColor: Colors.white,
)
],
)
],
),
),
],
));
}
}
Hello all this is my first flutter app. I have been trying to create a sign up page with few textfields. Everything looks good, but whenever I click on any textfield softkeyboard shows and hide the text filed(please see the attached images)

A few changes:
Set resizeToAvoidBottomPadding true
Remove the Flexible Widget
Wrap your first Column inside SingleChildScrollView
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: true,
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.green,
),
centerTitle: true,
title: Text(
"Welcome to E-Expense",
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
color: Colors.green),
),
elevation: 0.0,
backgroundColor: Color(0x00000000).withOpacity(0),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(15.0, 50.0, 0.0, 0.0),
child: Text(
"Signup",
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
),
),
Container(
padding: EdgeInsets.fromLTRB(270.0, 50.0, 0.0, 0.0),
child: Text(
".",
style: TextStyle(
color: Colors.green,
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'USER NAME',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'REPEAT PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
),
),
SizedBox(height: 40.0),
ButtonBar(
alignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
onPressed: () {},
child: Text(
'CANCEL',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.normal,
color: Colors.black,
),
)),
RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => null,
fullscreenDialog: false));
},
color: Colors.green,
child: Text(
'SIGNUP',
style: TextStyle(
fontFamily: 'Montserrat', fontSize: 15.0),
),
textColor: Colors.white,
)
],
)
],
),
),
),
],
),
));
}

Try wrapping the widget that contains those TextFields with a SingleChildScrollView.

Please use
android:windowSoftInputMode="adjustPan"
in forAndroidManifest.xml for activity SignUpPage

Related

How to get flutter's textfield trigger?

i want to change my container's border color when the TextField is on focus. Is in Flutter this thing is ilegal? i've tried several way and it color can't be change when TextField is on focus or loss focus.
open it https://i.postimg.cc/767RT4qW/Screenshot-45.png
here's my container and textfield code:
Container(
decoration: BoxDecoration(
border: Border.all(
color: _myFocusNode.hasFocus
? Colors.black38
: Colors.blue,
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
),
child: Icon(
Icons.alternate_email_rounded,
color: Colors.black38,
),
),
Flexible(
child: TextField(
focusNode: _myFocusNode,
autofocus: true,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
cursorHeight: 24,
cursorColor: Colors.grey,
decoration: const InputDecoration(
border: InputBorder.none,
suffixIcon: SizedBox(
height: 24,
width: 24,
),
hintText: 'Input your email',
hintStyle: TextStyle(
color: Colors.black38,
),
),
),
),
],
),
),
],
),

Try this:
FocusScope(
child: Focus(
onFocusChange: (focus) => print("focus: $focus"),
child: TextField(
decoration: const InputDecoration(labelText: 'City'),
)
)
)

try this
TextFormField(
decoration: InputDecoration(
labelText: "Name",
fillColor: Colors.white,
focusedBorder:OutlineInputBorder(
borderSide: const BorderSide(color: Colors.red, width: 2.0),
borderRadius: BorderRadius.circular(25.0),
),
),
)

How to resize TextField() text to fit the max width of an Expanded() widget

i want to resize the text of a TextField() widget in order to fit the max width of its Expanded() parent, this width is determined by flex: 10 as you can see in the code.
However, i do not know how can i achieve this result. I also tried the AutoSizeTextField() package with no success. Maybe someone can figure out how to do this.
Thank you in advance.
Edit. If it is not clear, the text is entered by the user. I want to resize it dynamically. The following image is just an example of the current behaviour of the App when user enters "This text should be resized".
Edit. I updated the code so that is clear what i am trying to do.
I have a list of transactions. When the user click on a transaction a dialog will popup in order to let the user edit the info he has provided.
This is the code which call the dialog, the dialog is ModificaTransazione().
Material(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: InkWell(
borderRadius: BorderRadius.circular(10),
onTap: () {
//sleep(Duration(milliseconds: 800));
showDialog(
context: context,
builder: (context) {
return Dialog(
insetPadding: EdgeInsets.only(
bottom: 0.0), //QUESTO TOGLIE SPAZIO DALLA TASTIERA
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)),
elevation: 16,
child: ModificaTransazione(
idtransazione: tx.id,
titolotransazione: tx.titolo,
importotransazione: tx.costo,
datatransazione: tx.data,
indicetransazione: tx.indicecategoria,
notatransazione: tx.nota,
listatransazioni: widget.transactions,
eliminatransazione: widget.deleteTx,
listanomicategorie: widget.listanomicategorie,
refreshSezioneFinanziaria:
widget.refreshFinanceScreen,
size: size),
);
},
).then((_) {
setState(() {});
});
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: SizedBox(
height: size.height * 0.10,
// color: Colors.red,
child: Row(
children: [
Expanded(
flex: 4,
child: Container(
margin: const EdgeInsets.only(left: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
FittedBox(
child: Text(
tx.titolo,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
FittedBox(
child: Text(
DateFormat('dd MMMM, yyyy', 'it')
.format(tx.data),
style: const TextStyle(
color: Colors.grey,
),
),
),
],
),
),
),
Expanded(
flex: 5,
child: Container(
alignment: Alignment.centerRight,
margin: const EdgeInsets.symmetric(horizontal: 15),
child: FittedBox(
child: Text(
'- ${ciframostrata(tx.costo)} €',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Color(0xFF7465fc)),
),
),
),
),
],
),
),
),
),
),
This is "ModificaTransazione()" literally "Edit Transaction" in Italian.
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/models/transaction.dart';
import 'package:flutter_application_1/widget/transactions_list.dart';
import 'package:intl/intl.dart';
import 'package:auto_size_text_field/auto_size_text_field.dart';
class ModificaTransazione extends StatefulWidget {
ModificaTransazione({
Key? key,
required this.size,
required this.idtransazione,
required this.titolotransazione,
required this.importotransazione,
required this.datatransazione,
required this.indicetransazione,
required this.notatransazione,
required this.listatransazioni,
required this.eliminatransazione,
required this.listanomicategorie,
required this.refreshSezioneFinanziaria,
}) : super(key: key);
final Size size;
final String idtransazione;
String titolotransazione;
double importotransazione;
DateTime datatransazione;
int indicetransazione;
String notatransazione;
List<String> listanomicategorie;
List<Transaction> listatransazioni;
final Function eliminatransazione;
final Function refreshSezioneFinanziaria;
#override
State<ModificaTransazione> createState() => _ModificaTransazioneState();
}
class _ModificaTransazioneState extends State<ModificaTransazione> {
var _notaController = TextEditingController();
var _importoController = TextEditingController();
var _titoloController = TextEditingController();
#override
void initState() {
super.initState();
if (widget.notatransazione != "") {
_notaController = TextEditingController(text: widget.notatransazione);
} else {
_notaController = TextEditingController(text: "Aggiungi");
}
_importoController = TextEditingController(
text: "${ciframostrata(widget.importotransazione)}");
_titoloController = TextEditingController(text: widget.titolotransazione);
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
width: widget.size.width * 0.8,
height: widget.size.height * 0.60,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding:
const EdgeInsets.only(top: 30, left: 30, right: 30, bottom: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
GestureDetector(
onTap: () {
setState(() {
Navigator.of(context).pop();
});
},
child: Icon(
Icons.cancel,
color: Colors.black,
),
),
Spacer(),
Expanded(
//
// THIS IS WHAT I WANT TO RESIZE, BUT FITTEDBOX IS CAUSING RENDERBOX IS NOT LAID OUT
//
flex: 10,
child: FittedBox(
fit: BoxFit.fitWidth,
child: TextField(
maxLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _titoloController,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
onSubmitted: (_) => salvaModifica(),
),
),
),
Spacer(),
GestureDetector(
child: Icon(
Icons.delete_outline_rounded,
color: Colors.black,
),
onTap: () {
print("Transazione Eliminata");
widget.eliminatransazione(widget.idtransazione);
Navigator.of(context).pop();
}),
],
),
Container(
padding: EdgeInsets.all(15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Theme.of(context).primaryColor.withOpacity(0.1),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
flex: 4,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _importoController,
keyboardType: const TextInputType.numberWithOptions(
decimal: true),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 60,
color: Theme.of(context).primaryColor,
),
onSubmitted: (_) => salvaModifica(),
),
),
Flexible(
//color: Colors.red,
//alignment: Alignment.centerRight,
//width: widget.size.width * 0.10,
// color: Colors.red,
child: Text(
"€",
style: TextStyle(
fontSize: 40,
color:
Theme.of(context).primaryColor.withOpacity(0.8),
),
),
),
],
),
),
// AutoSizeText(
// "${ciframostrata(widget.importotransazione)} €",
// maxLines: 1,
// style: TextStyle(
// fontSize: 70,
// color: Theme.of(context).primaryColor,
// ),
// ),
// ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Categoria",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.grey,
),
),
Container(
child: Row(
children: [
GestureDetector(
child: Text(
"${funzioneCategoria(indicenuovo ?? widget.indicetransazione, widget.listanomicategorie)[2]} ",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: funzioneCategoria(
indicenuovo ?? widget.indicetransazione,
widget.listanomicategorie)[1]),
),
onTap: _askedToLead,
),
Icon(
funzioneCategoria(
indicenuovo ?? widget.indicetransazione,
widget.listanomicategorie)[0],
color: funzioneCategoria(
indicenuovo ?? widget.indicetransazione,
widget.listanomicategorie)[1]),
],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Data",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.grey,
),
),
InkWell(
// borderRadius: BorderRadius.circular(10),
onTap: _presentDatePicker,
child: Text(
DateFormat('dd MMMM, yyyy', 'it')
.format(_selectedDate ?? widget.datatransazione),
style: TextStyle(
color: Colors.black, //Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
),
],
),
Container(
//color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
"Nota",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.grey,
),
),
),
Expanded(
child: (_notaController.text != "Aggiungi")
? TextField(
textAlign: TextAlign.end,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _notaController,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
onSubmitted: (_) => salvaModifica(),
)
: TextField(
textAlign: TextAlign.end,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _notaController,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[600],
),
onSubmitted: (_) => salvaModifica(),
)),
],
),
),
modificato == true
? TextButton(
child: Text("Salva"),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Theme.of(context).primaryColor),
foregroundColor:
MaterialStateProperty.all(Colors.white),
),
onPressed: () {
premuto = true;
salvaModifica();
},
)
: SizedBox(),
],
),
),
),
);
}

You can use the FittedBox widget to dynamically change text size based on width or height.
FittedBox(
fit: BoxFit.fitWidth,
child: TextField(
maxLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
),
controller: _titoloController,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
onSubmitted: (_) => salvaModifica(),
)),
The text will be resized based on the width of Expanded.

I have checked your code. You can do the following:
Row(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {
setState(() {
Navigator.of(context).pop();
});
},
child: Icon(
Icons.cancel,
color: Colors.black,
),
),
Expanded(
child: TextField(
maxLines: 4,
decoration: InputDecoration(
border: InputBorder.none,
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
GestureDetector(
child: Icon(
Icons.delete_outline_rounded,
color: Colors.black,
),
onTap: () {
print("Transazione Eliminata");
Navigator.of(context).pop();
}),
],
),

how to resolve BOTTOM OVERFLOWED BY 84 PIXLES in Flutter Activity?

I am new to Flutter I have the following activity, when I click in Text Field Keyboard appears and then the warning e.g. BOTTOM OVERFLOWED BY 84 PIXLES also appears how can i be able to resolve this issue? when I tried SingleChildScrollView then empty area("where there is no Widgets") of activity gone white. Is there any Widget that is missing or i made a mistake in my code?
My Activity
here is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';
import 'bottomnavigationbar.dart';
class Payment2 extends StatefulWidget {
#override
_Payment2State createState() => _Payment2State();
}
class _Payment2State extends State<Payment2> {
#override
Widget build(BuildContext context) {
final PaymentButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Route route = MaterialPageRoute(builder: (context) => Paymentdone());
Navigator.pushReplacement(context, route);
},
child: Text("Payment",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.w800)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(16),
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
bottomNavigationBar: BottomNavigation(),
);
}
Widget cardnumber() {
return TextField(
style: style,
maxLength: 16,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'XXXX XXXX XXXX 1234',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
);
}
TextStyle style =
TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}

using a SingleChildScrollView is the right way to go.
in order to fix the issue you talked about, delete the color attribute from the container, and move it to the scaffold background color attribute:
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Column(
// the rest of the widgets...
),
),
);

Simply add resizeToAvoidBottomInset: false to your Scaffold

Also you can wrap the child inside SingleChildScrollView

Use SingleChildScrollView in body. To avoid white portion problem wrap it inside a Stack.
Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(16),
color: Colors.black,
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
)
],
)

How to achieve this layout with same color scheme in Flutter?

I want to develop the Following design in Flutter, I am using Flutter default colors, the I am facing is that when I use Container having color is black and then want to place some Widgets inside of that container having Lighter color than Black as you can in Following image are not visible how to resolve this?
Here is some Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';
import 'bottomnavigationbar.dart';
class Payment2 extends StatefulWidget {
#override
_Payment2State createState() => _Payment2State();
}
class _Payment2State extends State<Payment2> {
#override
Widget build(BuildContext context) {
final PaymentButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Route route = MaterialPageRoute(builder: (context) => Paymentdone());
Navigator.pushReplacement(context, route);
},
child: Text("Payment",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.w800)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(12),
color: Colors.black,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Card(
color: Colors.blueGrey,
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Card(
color: Colors.blueGrey,
child: emailField(),
),
//
// Row(
// crossAxisAlignment: CrossAxisAlignment.center,
// children: <Widget>[
// Card(
// child: Exp_Date(),
// ),
// Card(
// child: CVV(),
// )
// ],
// ),
TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
// Exp_Date(),
PaymentButton,
],
),
),
bottomNavigationBar: BottomNavigation(),
);
}
Widget emailField() {
return TextFormField(
//obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
//labelText: "Card Number",
hintText: 'xxxx xxxx 1234',
),
);
}
Widget Exp_Date() {
return TextFormField(
obscureText: true,
style: style,
decoration: InputDecoration(
// contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
// labelText: "Exp Date",
hintText: "MM/YY",
),
);
}
Widget CVV() {
return TextFormField(
obscureText: true,
style: style,
decoration: InputDecoration(
// contentPadding: EdgeInsets.fromLTRB(20.0, 0, 0, 10.0),
//labelText: "CVV",
hintText: "CVV",
),
);
}
TextStyle style =
TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}
Note
I don't have any issues with BottomNavigationBar

Use Color(0xFF1E1E1E) instead of Colors.blueGrey.

How to login and Signup with Rest API using flutter with Session establishment

I have created a login form with email, password a login button. I am new to flutter, dart and web.
How do I integrate the JSON Restfull API for Login and Signup, by using JSON as an object.
Also please let me know how to establish a session once the user is logged in.
Please let me know how to Skip Login Page if the user has already logged in (by using Flutter and Dart)
I have created the login screen and the Signup screen, also the Splash screen
//Splash Screen UI Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:interview/myhomepage.dart';
import 'package:interview/signup.dart';
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => new _SplashScreenState();
}
const TextStyle textStyle = TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
);
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
#override
void initState() {
super.initState();
controller = AnimationController(
duration: Duration(milliseconds: 2000),
vsync: this,
);
animation = Tween(begin: 0.0, end: 1.0).animate(controller)
..addListener(() {
setState(() {});
});
controller.forward();
}
#override
void dispose() {
super.dispose();
controller.dispose();
}
final background = Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
),
);
final greenOpacity = Container(
color: Color(0xAA72F1CF),
);
Widget button(String lable, Function onTap) {
return new FadeTransition(
opacity: animation,
child: new SlideTransition(
position: Tween<Offset>(begin: Offset(0.0, -0.6), end: Offset.zero)
.animate(controller),
child: Material(
color: Color(0xBB00D699),
borderRadius: BorderRadius.circular(30.0),
child: InkWell(
onTap: onTap,
splashColor: Colors.white24,
highlightColor: Colors.white10,
child: Container(
padding: EdgeInsets.symmetric(vertical: 13.0),
child: Center(
child: Text(
lable,
style: textStyle.copyWith(fontSize: 18.0),
),
),
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
final logo = new ScaleTransition(
scale: animation,
child: Image.asset(
'assets/images/logo.png',
width: 100.0,
height: 100.0,
),
);
final description = new FadeTransition(
opacity: animation,
child: new SlideTransition(
position: Tween<Offset>(begin: Offset(0.0, -0.8), end: Offset.zero)
.animate(controller),
child: Text(
'The interviewee social network.',
textAlign: TextAlign.center,
style: textStyle.copyWith(fontSize: 24.0),
),
),
);
final separator = new FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 20.0,
height: 2.0,
color: Colors.white,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
'OR',
style: textStyle,
),
),
Container(width: 20.0, height: 2.0, color: Colors.white),
],
),
);
final signWith = new FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Sign in with',
style: textStyle,
),
GestureDetector(
onTap: () {
print('google');
},
child: Text(
' Google',
style: textStyle.copyWith(
color: Color(0xFFE65100),
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
Text(' or', style: textStyle),
GestureDetector(
onTap: () {
print('Facebook');
},
child: Text(
' Facebook',
style: textStyle.copyWith(
color: Color(0xFF01579B),
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
],
),
);
final guestContinue = new FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Wana Skip login?',
style: textStyle.copyWith(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
)),
GestureDetector(
onTap: () {
print('guest');
},
child: Text(
' Click here!',
style: textStyle.copyWith(
color: Color(0xBB009388),
fontSize: 18.0,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline),
),
),
],
),
);
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
background,
greenOpacity,
new SafeArea(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
logo,
SizedBox(height: 30.0),
description,
SizedBox(height: 60.0),
button('Create an account', () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignupPage()),
);
}),
SizedBox(height: 8.0),
button('Sign In', () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyHomePage()),
);
}),
SizedBox(height: 20.0),
separator,
SizedBox(height: 20.0),
guestContinue,
SizedBox(height: 20.0),
separator,
SizedBox(height: 30.0),
signWith,
],
),
),
),
],
));
}
}
//Login Page UI code is below:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:interview/signup.dart';
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(10.0, 110.0, 0.0, 0.0),
child: Text('Hello',
style: TextStyle(
fontSize: 80.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 175.0, 0.0, 0.0),
child: Text('There',
style: TextStyle(
fontSize: 80.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(220.0, 175.0, 0.0, 0.0),
child: Text('.',
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
color: Colors.teal[800])),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 5.0),
Container(
alignment: Alignment(1.0, 0.0),
padding: EdgeInsets.only(top: 15.0, left: 20.0),
child: InkWell(
child: Text(
'Forgot Password?',
style: TextStyle(
color: Colors.teal[800],
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
decoration: TextDecoration.underline),
),
),
),
SizedBox(height: 20.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.tealAccent,
color: Colors.teal[500],
elevation: 7.0,
child: GestureDetector(
onTap: () {},
child: Center(
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
),
),
SizedBox(height: 20.0),
],
)),
SizedBox(height: 5.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'New Here ?',
style: TextStyle(fontFamily: 'Montserrat'),
),
SizedBox(width: 5.0),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignupPage()),
);
},
child: Text(
'Register',
style: TextStyle(
color: Colors.teal[800],
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline),
),
)
],
),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(width: 5.0),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignupPage()),
);
},
child: Text(
'Continue as Guest!',
style: TextStyle(
color: Colors.teal[800],
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
fontSize: 16.0,
decoration: TextDecoration.underline),
),
)
],
),
],
),
],
));
}
}
//Signup Page UI Code is below:
import 'package:flutter/material.dart';
class SignupPage extends StatefulWidget {
#override
_SignupPageState createState() => _SignupPageState();
}
class _SignupPageState extends State<SignupPage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(15.0, 110.0, 0.0, 0.0),
child: Text(
'Signup',
style: TextStyle(
fontSize: 60.0, fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(190.0, 125.0, 0.0, 0.0),
child: Text(
'.',
style: TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
color: Colors.teal),
),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 15.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'First Name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'Last Name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'Mobile Number',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'PASSWORD ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 10.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.greenAccent,
color: Colors.teal,
elevation: 7.0,
child: GestureDetector(
onTap: () {},
child: Center(
child: Text(
'SIGNUP',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
)),
SizedBox(height: 30.0),
Container(
height: 40.0,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
color: Colors.transparent,
borderRadius: BorderRadius.circular(20.0)),
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Text('Go Back',
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat')),
),
),
),
),
],
)),
]));
}
}
I need help to create a function, which can take values entered in my signup page and complete the registration, also an email validation link is to be added.
Also, I need help in creating a function to login by calling the RESTFUL API.
The login should establish a session and if the user returns to the App after he has logged in, he should be directed to the home page by skipping the Splash and Login page.

First you should put two controllers for mail and password inputs
final _mailController = TextEditingController();
final _passController = TextEditingController();
then at each Text filed add controller: _passController and same goes for mail.
To user the restful API you have to call the API in onTap() of the log in button.
here's an example:
onTap: () async {
String urL ="Here put your API Link"
//Example: "https://Mywebsite/api/values/" +_mailController.text +"/" + _passController.text;
var reponse = await http.get(urL,
headers: {"Accept": "application/json"});
var data = json.decode(reponse.body);
}
In data should be what you return from the API.
also you have to import 'dart:convert'; and import 'package:http/http.dart' as http;
In case the response is OK then you need to save this in the Shared preferences.
This answer will help you a lot in this: How to use shared preferences to keep user logged in flutter?
Good luck.

//Splash Screen UI Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:interview/myhomepage.dart';
import 'package:interview/signup.dart';
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => new _SplashScreenState();
}
const TextStyle textStyle = TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
);
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
#override
void initState() {
super.initState();
controller = AnimationController(
duration: Duration(milliseconds: 2000),
vsync: this,
);
animation = Tween(begin: 0.0, end: 1.0).animate(controller)
..addListener(() {
setState(() {});
});
controller.forward();
}
#override
void dispose() {
super.dispose();
controller.dispose();
}
final background = Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
),
);
final greenOpacity = Container(
color: Color(0xAA72F1CF),
);
Widget button(String lable, Function onTap) {
return new FadeTransition(
opacity: animation,
child: new SlideTransition(
position: Tween<Offset>(begin: Offset(0.0, -0.6), end: Offset.zero)
.animate(controller),
child: Material(
color: Color(0xBB00D699),
borderRadius: BorderRadius.circular(30.0),
child: InkWell(
onTap: onTap,
splashColor: Colors.white24,
highlightColor: Colors.white10,
child: Container(
padding: EdgeInsets.symmetric(vertical: 13.0),
child: Center(
child: Text(
lable,
style: textStyle.copyWith(fontSize: 18.0),
),
),
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
final logo = new ScaleTransition(
scale: animation,
child: Image.asset(
'assets/images/logo.png',
width: 100.0,
height: 100.0,
),
);
final description = new FadeTransition(
opacity: animation,
child: new SlideTransition(
position: Tween<Offset>(begin: Offset(0.0, -0.8), end: Offset.zero)
.animate(controller),
child: Text(
'The interviewee social network.',
textAlign: TextAlign.center,
style: textStyle.copyWith(fontSize: 24.0),
),
),
);
final separator = new FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 20.0,
height: 2.0,
color: Colors.white,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
'OR',
style: textStyle,
),
),
Container(width: 20.0, height: 2.0, color: Colors.white),
],
),
);
final signWith = new FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Sign in with',
style: textStyle,
),
GestureDetector(
onTap: () {
print('google');
},
child: Text(
' Google',
style: textStyle.copyWith(
color: Color(0xFFE65100),
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
Text(' or', style: textStyle),
GestureDetector(
onTap: () {
print('Facebook');
},
child: Text(
' Facebook',
style: textStyle.copyWith(
color: Color(0xFF01579B),
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
),
],
),
);
final guestContinue = new FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Wana Skip login?',
style: textStyle.copyWith(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
)),
GestureDetector(
onTap: () {
print('guest');
},
child: Text(
' Click here!',
style: textStyle.copyWith(
color: Color(0xBB009388),
fontSize: 18.0,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline),
),
),
],
),
);
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
background,
greenOpacity,
new SafeArea(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
logo,
SizedBox(height: 30.0),
description,
SizedBox(height: 60.0),
button('Create an account', () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignupPage()),
);
}),
SizedBox(height: 8.0),
button('Sign In', () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyHomePage()),
);
}),
SizedBox(height: 20.0),
separator,
SizedBox(height: 20.0),
guestContinue,
SizedBox(height: 20.0),
separator,
SizedBox(height: 30.0),
signWith,
],
),
),
),
],
));
}
}
//Login Page UI code is below:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:interview/signup.dart';
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(10.0, 110.0, 0.0, 0.0),
child: Text('Hello',
style: TextStyle(
fontSize: 80.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(16.0, 175.0, 0.0, 0.0),
child: Text('There',
style: TextStyle(
fontSize: 80.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(220.0, 175.0, 0.0, 0.0),
child: Text('.',
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
color: Colors.teal[800])),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 10.0),
TextField(
decoration: InputDecoration(
labelText: 'PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 5.0),
Container(
alignment: Alignment(1.0, 0.0),
padding: EdgeInsets.only(top: 15.0, left: 20.0),
child: InkWell(
child: Text(
'Forgot Password?',
style: TextStyle(
color: Colors.teal[800],
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
decoration: TextDecoration.underline),
),
),
),
SizedBox(height: 20.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.tealAccent,
color: Colors.teal[500],
elevation: 7.0,
child: GestureDetector(
onTap: () {},
child: Center(
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
),
),
SizedBox(height: 20.0),
],
)),
SizedBox(height: 5.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'New Here ?',
style: TextStyle(fontFamily: 'Montserrat'),
),
SizedBox(width: 5.0),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignupPage()),
);
},
child: Text(
'Register',
style: TextStyle(
color: Colors.teal[800],
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline),
),
)
],
),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(width: 5.0),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignupPage()),
);
},
child: Text(
'Continue as Guest!',
style: TextStyle(
color: Colors.teal[800],
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
fontSize: 16.0,
decoration: TextDecoration.underline),
),
)
],
),
],
),
],
));
}
}
//Signup Page UI Code is below:
import 'package:flutter/material.dart';
class SignupPage extends StatefulWidget {
#override
_SignupPageState createState() => _SignupPageState();
}
class _SignupPageState extends State<SignupPage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(15.0, 110.0, 0.0, 0.0),
child: Text(
'Signup',
style: TextStyle(
fontSize: 60.0, fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(190.0, 125.0, 0.0, 0.0),
child: Text(
'.',
style: TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
color: Colors.teal),
),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 15.0, left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: 'First Name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'Last Name',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'Mobile Number',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
// hintText: 'EMAIL',
// hintStyle: ,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
),
SizedBox(height: 5.0),
TextField(
decoration: InputDecoration(
labelText: 'PASSWORD ',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
),
SizedBox(height: 10.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.greenAccent,
color: Colors.teal,
elevation: 7.0,
child: GestureDetector(
onTap: () {},
child: Center(
child: Text(
'SIGNUP',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
)),
SizedBox(height: 30.0),
Container(
height: 40.0,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
color: Colors.transparent,
borderRadius: BorderRadius.circular(20.0)),
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Center(
child: Text('Go Back',
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat')),
),
),
),
),
],
)),
]));
}
}

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

TextField gets hidden when the keyboard pops in - android

Try wrapping the widget that contains those TextFields with a SingleChildScrollView.

Please use android:windowSoftInputMode="adjustPan" in forAndroidManifest.xml for activity SignUpPage

Related

How to get flutter's textfield trigger?

How to resize TextField() text to fit the max width of an Expanded() widget

how to resolve BOTTOM OVERFLOWED BY 84 PIXLES in Flutter Activity?

How to achieve this layout with same color scheme in Flutter?

How to login and Signup with Rest API using flutter with Session establishment

Categories

Resources