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

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

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

Related

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

Widget Expanded height according to Listview content

I'm trying to put the height of the Expanded Widget to the size of the Listview inside it, but I'm not getting it, here's the code:
With the code below, the listviews are very small and shrunk and I would like to set a size or leave the auto size for the content, I already tried to change from Expanded to Flexible with fit: flexfit.loose and it didn't work either
class ProdutoPage extends GetView<ProdutosController> {
final controller = Get.find<ProdutosController>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('${Get.arguments}'),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(
bottom: 1.0, left: 1.0, right: 8.0, top: 1.0),
child: Badge(
position: BadgePosition.topEnd(top: 2, end: 2),
badgeColor: Colors.red.shade800,
badgeContent: Text(
controller.itensCarrinho.length.toString(),
style: TextStyle(color: Colors.white),
),
child: IconButton(
icon: Icon(Icons.shopping_cart_rounded),
iconSize: 40.0,
onPressed: () {},
),
),
)
],
),
body: SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Container(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Cores:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Expanded(
child: Obx(
() => ListView.builder(
scrollDirection: Axis.vertical,
itemCount: controller.produtosCoresList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: true,
contentPadding:
EdgeInsets.only(left: 3.0, right: 0.0),
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
title:
Text(controller.produtosCoresList[index].cor),
leading: Radio(
value: controller.produtosCoresList[index].cor,
groupValue: 'ROSA',
onChanged: (value) {},
activeColor: Colors.red.shade800,
),
);
}),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Tamanho:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Expanded(
child: Obx(
() => ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: controller.produtosTamanhoList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: true,
contentPadding:
EdgeInsets.only(left: 3.0, right: 0.0),
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
title:
Text(controller.produtosTamanhoList[index].tam),
leading: Radio(
value: controller.produtosTamanhoList[index].tam,
groupValue: 'IG',
onChanged: (value) {},
activeColor: Colors.red.shade800,
),
);
},
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Quantidade:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.only(
top: 8.0, bottom: 8.0, left: 150.0, right: 150.0),
child: TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Observações Gerais:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: 5,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Observações Internas:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: 5,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: ElevatedButton(
onPressed: () {},
child: Text('Adicionar ao Carrinho'),
style: ElevatedButton.styleFrom(
minimumSize: Size(400, 60),
textStyle: TextStyle(fontSize: 18),
),
),
)
],
),
),
),
),
);
}
}

You column is quite complex, I suggest you to use CustomScrollView, reference.
In CustomScrollView:
change your ListView widget to SliverList
change your Padding widget to SliverPadding
wrap your Text widget in SliverToBoxAdapter
wrap your Divider widget in SliverToBoxAdapter
and see how it works.

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.

Bottom oveflowed by 82 pixels in flutter

I am getting bottom overflowed by 82 pixels exception in bottom of the sign up screen. tried with resizeToAvoidBottomPadding: false but it is not working. i am integrating flutter module into existing android app. calling flutter inside an activity. based on screen height it is covering Button or Text. and sometimes it is showing bottom overflowed by 7 pixels. it is changing based on screen height.
Here is the code:
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
//resizeToAvoidBottomPadding : false,
key: _scaffoldKey,
body: SingleChildScrollView(
child: SafeArea(
child: Container(
height: SizeConfig.blockSizeVertical * 100,
width: SizeConfig.blockSizeHorizontal * 100,
decoration: BoxDecoration(
color: Color(0xffF44336)
),
child:Stack(
children: <Widget>[
Hero(
tag: 'signupTag',
child: Container(
height: SizeConfig.blockSizeVertical * 30,
width: SizeConfig.blockSizeHorizontal * 100,
alignment: Alignment.center,
child: Text('Sign up', style: TextStyle(fontFamily:'Montserrat', fontSize: 50.0, color: Colors.white))
),
),
Positioned(
bottom: 0.0,
child: Container(
padding: EdgeInsets.only(top:70.0, left: 50.0, right:50.0),
height: SizeConfig.blockSizeVertical * 75,
width: SizeConfig.blockSizeHorizontal * 100,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(45.0), topRight: Radius.circular(45.0))
),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child:Text('Welcome', style:TextStyle(fontSize:30.0, fontWeight: FontWeight.bold, fontFamily: 'Montserrat', color: Color(0xff424242)),),
),
Container(
margin: EdgeInsets.only(bottom:20.0),
alignment: Alignment.centerLeft,
child:Text('Create an account to continue', style:TextStyle(fontSize:16.0, fontWeight: FontWeight.bold, fontFamily: 'Montserrat', color: Color(0xff707475)),),
),
TextField(
controller: nameController,
style: TextStyle(fontSize:17.0),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
hintText: "Full Name",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffff992b), width: 2.0)
)
),
),
SizedBox(
height: 25.0,
),
TextField(
controller: emailController,
style: TextStyle(fontSize:17.0),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
hintText: "Email",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffff992b), width: 2.0)
)
),
),
SizedBox(
height: 25.0,
),
TextField(
obscureText: true,
controller: passwordController,
style: TextStyle(fontSize:17.0),
autocorrect: false,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 15.0),
hintText: "Password",
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffff992b), width: 2.0)
)
),
),
SizedBox(
height: 40.0,
),
Stack(
children: <Widget>[
Positioned.fill(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
boxShadow: [
BoxShadow(
offset: Offset(0.0, 15.0),
blurRadius: 15.0,
color: Color(0xffBDBDBD),
spreadRadius: 2.0
)
]
)
)
),
Material(
// elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Color(0xffF44336),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(20.0),
onPressed: () {
signup().then((res){
if(res['status'] == 'Success'){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginPage()),
);
} else {
_displaySnackBar(context, res['comments']);
}
});
},
child: Text("CREATE",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize:15.0, letterSpacing: 1.5),
)
),
),
],
),
SizedBox(
height: 30.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Already have an account?", style:TextStyle(fontSize: 16.0)),
Hero(
tag: 'loginTag',
child:FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginPage()),
);
},
child: Text('Sign in', style:TextStyle(fontSize: 18.0, color: Color(0xffF44336)))
)
)
],
)
],
)
),
)
],
)
)
)
)
);
}
}

The hierarchy should be :
body: SafeArea
- SingleChildScrollView
-Container(remove height)

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.

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

Simply add resizeToAvoidBottomInset: false to your Scaffold

Also you can wrap the child inside SingleChildScrollView

Related

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

Widget Expanded height according to Listview content

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

Bottom oveflowed by 82 pixels in flutter

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

Categories

Resources