How to make validation stepper when form inside bottomsheet?

How to make validation stepper when form inside bottomsheet? - android

This app make a stepper. In stepper I build add data and show bottomsheet. In bottomsheet we can add data from there, but in this case how to validate stepper when we click next steps read method bottomsheet (if user not filling field showing error in stepper).
This is the method bottomsheet:
class StepperclassState extends State<Stepperclass> {
void inputRekomen(){
final Formlist formProvider = Provider.of<Formlist>(context, listen: false);
showModalBottomSheet(
//isScrollControlled: true,
context: context,
backgroundColor: Colors.white,
shape : RoundedRectangleBorder(
borderRadius : BorderRadius.vertical( top: Radius.circular(30),)
),
builder: (context) => DraggableScrollableSheet(
expand: false,
builder: (context, scrollController) => SingleChildScrollView(
controller: scrollController,
child: StatefulBuilder(
builder: (BuildContext context, StateSetter stateSetter) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: Color(0xffFFFFF),
),
child: Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: white),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 15, left: 145),
child: Container(
width: 80, height: 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
),
color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.only(top: 30, right: 10, left: 10, bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(color: Color(0xffDCE9F3),
borderRadius: BorderRadius.circular(30),),
child: Form(
key: formKey3,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 20,),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Apa tindakan rekomendasi untuk mencegah kejadian berulang ?', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
SizedBox(height: 30,),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Rekomendasi', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10, bottom: 20.0, left: 20, right: 20),
child: Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context, errorText: FormBuilderLocalizations.of(context).requiredErrorText),
FormBuilderValidators.minLength(context, 3, errorText: FormBuilderLocalizations.of(context).minLengthErrorText(3)),
FormBuilderValidators.email(context, errorText: FormBuilderLocalizations.of(context).emailErrorText ),
]),
textAlign: TextAlign.start,
decoration: InputDecoration(
fillColor: Color(0xfffaebeb),
filled: inputteks,
contentPadding: EdgeInsets.all(12),
border: InputBorder.none,
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0) ),
),
focusedErrorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0), width: 1),
),
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black, width: 1),
),
errorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xffE64646) ),
),
disabledBorder: InputBorder.none,),
autofocus: false,
controller: rekomen,
onChanged: (String value) {
formProvider.tanggaltext(value);
rekomen.selection = TextSelection.fromPosition(TextPosition(offset: rekomen.text.length));
},
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Penjelasan', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10, bottom: 20.0, left: 20, right: 20),
child: Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context, errorText: FormBuilderLocalizations.of(context).requiredErrorText),
FormBuilderValidators.minLength(context, 3, errorText: FormBuilderLocalizations.of(context).minLengthErrorText(3)),
FormBuilderValidators.email(context, errorText: FormBuilderLocalizations.of(context).emailErrorText ),
]),
textAlign: TextAlign.start,
decoration: InputDecoration(
fillColor: Color(0xfffaebeb),
filled: inputteks,
contentPadding: EdgeInsets.all(12),
border: InputBorder.none,
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0) ),
),
focusedErrorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xff3F8AE0), width: 1),
),
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.black, width: 1),
),
errorBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide(color: Color(0xffE64646) ),
),
disabledBorder: InputBorder.none,),
autofocus: false,
controller: penjelasan,
onChanged: (String value) {
formProvider.tanggaltext(value);
penjelasan.selection = TextSelection.fromPosition(TextPosition(offset: penjelasan.text.length));
},
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Penanggung Jawab Tindakan Rekomendasi:', style: blackregstyle.copyWith(
fontSize: 14,
),
),
),
),
SizedBox(height: 5,),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Container(
width: 280,
decoration: BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.circular(16),
),
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 5),
),
),
),
Column(
children: [
SizedBox(height: 5,),
Padding(
padding: const EdgeInsets.only(top: 10, right: 25, left: 25),
child: Container(
width: 315,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.black),
),
constraints: BoxConstraints(
minHeight: 45,
minWidth: 315,
),
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12),
child: GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},
child: chosenValue == -1 ? Text(
'Penanggung Jawab'
) : Text(
'${penanggung[chosenValue]}'
),
)
),),
GestureDetector(
onTap: () {
stateSetter(() {
showdropdown = showdropdown == true ? false : true;
});
print(showdropdown);
print(chosenValue1);
},
child: Icon
(
showdropdown ?
Icons.arrow_drop_up_rounded : Icons.arrow_drop_down_rounded,
),
),
],
),
),
),
Visibility(
visible: showdropdown,
child: Stack(
children: [
Container(
height: 100,
width: 290,
decoration: BoxDecoration(
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.only(left: 5),
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: penanggung.length,
itemBuilder: (BuildContext context, int position) {
return InkWell(
onTap: () {
stateSetter(() {
chosenValue = position;
if ( position == 2){
showTextField1 = true;
showdropdown = false;
buttonshow = false;
}
else{
showTextField1 = false;
showdropdown = false;
buttonshow = true;
}
});
},
child: Container(
width: 150,
child: Container(
decoration: (chosenValue==position)
? BoxDecoration(
border: Border.all(color: Colors.green))
: null,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 5,),
Text(penanggung[position], textAlign: TextAlign.left, ),
SizedBox(height: 5,),
],
),
),
),
);
},
),
),
),
],
),
),
],
),
Visibility(
visible: buttonshow,
child: Padding(
padding: const EdgeInsets.only(top: 10, left: 24),
child: Container(
height: 44,
child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },
color: Color(0xff4986CC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
child: Text(
'Simpan', style: putihstyle.copyWith(
fontSize: 14,
),
),
),
),
),
),
Center(
child: Column(
children: [
Opacity(opacity: loading ? 1.0 : 0,
child: CircularProgressIndicator(),)
],
),
),
Visibility(
visible: showTextField1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 10, left: 24),
child: Container(
height: 40,
child: RaisedButton(
onPressed: loading ? null : (){ stateSetter(() {
loading = true;
validateAndSave();
formProvider.submit();
}); },
color: Color(0xff4986CC),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(17),
),
child: Text(
'Simpan', style: putihstyle.copyWith(
fontSize: 14,
),
),
),
),
),
],
),
),
],
),
),
), ),
],
),
),
],
),
);
}
),
),
),
);
}
}
this is my stepper
#override
Widget build(BuildContext context) {
CoolStep(
title: 'Identitas',
subtitle: 'Isi Identitas Saksi/korban',
alignment: Alignment.topCenter,
content: Stack(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Container(
width: 461,
height: 350,
decoration: BoxDecoration(
color: Color(0xffDCE9F3),
borderRadius: BorderRadius.circular(23),),
child: Padding(
padding: const EdgeInsets.all( 20),
child: Column(
children: [
Container(
width: 221,
height: 146,
),
],
),
),
),
),
Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 320, left: 250),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(onPressed: () => setState(() {
inputRekomen();
}),
tooltip: 'Tambahkan',
child: Icon(Icons.add,),
backgroundColor: Color(0xff5D99C5),
),
],
),
),
],
),
], ),
validation: () {
return null;
},
),

I am not sure if this can help solve the problem, since the problem is not clear enough.
First, you need to wrap all if the steps form in Form, Set the key from the class property. for example:
final _formKey = GlobalKey<FormState>();
then on build method, on the Form widget set the key:
child: Form(
key: _formKey,
...
and then on each TextFormField, put validator on it for example:
validator: (value) {
if (value!.isEmpty) {
return 'Name is required';
}
return null;
}
then, when you need validation/checking on another methods in bottomsheet just call these function:
if (!_formKey.currentState!.validate()) {
return 'Fill form correctly';
}

Related

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 check if my cloud firestore collection contains contains any documents

I am trying to check if my firestore collection "payments" contains any documents where the string userActive is contained in any document field array called participants,and if it doesn't perform an action or if it does perform a different action, this is what i have tried so far but its not working
import 'package:flutter/material.dart';
import 'package:wallet_app/send.dart';
import 'package:wallet_app/send_money.dart';
import 'package:wallet_app/recieve.dart';
import 'package:wallet_app/load.dart';
import 'package:wallet_app/account.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:wallet_app/CardScreen.dart';
import 'package:flutter_icons/flutter_icons.dart';
class HomeScreener extends StatefulWidget{
HomeScreen createState()=> HomeScreen();
}
class HomeScreen extends State<HomeScreener> {
HomeScreen createState() => HomeScreen();
final databaseReference = FirebaseFirestore.instance;
var userId = "dAIdrQggsrxvQ4KUo2aJ";
var userActive = "kim";
var userHasData = 0;
checkDatabase()async {
final docSnapshot = await FirebaseFirestore.instance
.collection('payments')
.where('participants', arrayContains: userActive)
.getDocuments();
if(docSnapshot.documents.isEmpty) {
// Your queried documents do not exist
userHasData = 1;
}
else if(docSnapshot.documents.isEmpty){
// Your queried documents do not exist
}
userHasData = 2;
}
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: Stack(
children: <Widget>[
//Container for top data
Container(
margin: EdgeInsets.symmetric(horizontal: 32, vertical: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Hello " + "$userActive", style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.w700),),
Container(
margin: EdgeInsets.only(top: 20),
child: Row(
children: <Widget>[
// Icon(Icons.notifications, color: Colors.lightBlue[100],),
SizedBox(width: 16,),
CircleAvatar(
radius: 25,
backgroundColor: Colors.white,
child: ClipOval(
child: Image.asset("assets/newdp.png", fit: BoxFit.contain,),
),
)
],
),
)
],
),
Text("What would you like to do today?", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 16, color: Colors.blue[100]),),
SizedBox(height : 40,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(243, 245, 248, 1),
borderRadius: BorderRadius.all(Radius.circular(18))
),
child:IconButton(
icon: Icon(Icons.send, color: Colors.blue[900], size: 30,),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => sendPager()),
);
},
),
padding: EdgeInsets.all(3),
),
SizedBox(
height: 10,
),
Text("Send", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Colors.blue[100]),),
],
),
),
Container(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(243, 245, 248, 1),
borderRadius: BorderRadius.all(Radius.circular(18))
),
child:IconButton(
icon: Icon(Icons.account_balance, color: Colors.blue[900], size: 30,),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => loadPager()),
);
},
),
padding: EdgeInsets.all(3),
),
SizedBox(
height: 10,
),
Text("Account", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Colors.blue[100]),),
],
),
),
Container(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(243, 245, 248, 1),
borderRadius: BorderRadius.all(Radius.circular(18))
),
child:IconButton(
icon: Icon(Icons.people, color: Colors.blue[900], size: 30,),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => loadPager()),
);
},
),
padding: EdgeInsets.all(3),
),
SizedBox(
height: 10,
),
Text("Recipients", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Colors.blue[100]),),
],
),
),
Container(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(243, 245, 248, 1),
borderRadius: BorderRadius.all(Radius.circular(18))
),
child:IconButton(
icon: Icon(Icons.add, color: Colors.blue[900], size: 30,),
onPressed: () {
databaseReference.collection("payments").add(
{
"amount_paid" : "2444242",
"amount_received" : "33535",
"currency_received" : "¥",
"currency_sent" :"K",
'date':FieldValue.serverTimestamp(),
"participants" :["kim", "john" ],
"receiver_name" : "john",
"sender_name" : "kim"
}).then((value){
print("================================sucess=============================================================");
print(value.documentID);
});
Navigator.push(
context,
MaterialPageRoute(builder: (context) => loadPager()),
);
},
),
padding: EdgeInsets.all(3),
),
SizedBox(
height: 10,
),
Text("Invite", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Colors.blue[100]),),
],
),
)
],
)
],
),
),
//draggable sheet
DraggableScrollableSheet(
builder: (context, scrollController){
return Container(
decoration: BoxDecoration(
color: Color.fromRGBO(243, 245, 248, 1),
borderRadius: BorderRadius.only(topLeft: Radius.circular(40), topRight: Radius.circular(40))
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 24,),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Recent Transactions", style: TextStyle(fontWeight: FontWeight.w900, fontSize: 24, color: Colors.black),),
Text("See all", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 16, color: Colors.grey[800]),)
],
),
padding: EdgeInsets.symmetric(horizontal: 32),
),
SizedBox(height: 24,),
//Container for buttons
Container(
padding: EdgeInsets.symmetric(horizontal: 32),
child: Row(
children: <Widget>[
Container(
child: Text("All", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Colors.grey[900]),),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [BoxShadow(color: Colors.grey[200], blurRadius: 10.0, spreadRadius: 4.5)]
),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
SizedBox(width: 16,),
Container(
child: Row(
children: <Widget>[
CircleAvatar(
radius: 8,
backgroundColor: Colors.green,
),
SizedBox(
width: 8,
),
Text("Recieved", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Colors.grey[900]),),
],
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [BoxShadow(color: Colors.grey[200], blurRadius: 10.0, spreadRadius: 4.5)]
),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
SizedBox(width: 16,),
Container(
child: Row(
children: <Widget>[
CircleAvatar(
radius: 8,
backgroundColor: Colors.orange,
),
SizedBox(
width: 8,
),
Text("Transfer", style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: Colors.grey[900]),),
],
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [BoxShadow(color: Colors.grey[200], blurRadius: 10.0, spreadRadius: 4.5)]
),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
)
],
),
),
SizedBox(height: 16,),
//Container Listview for expenses and incomes
Container(
child: Text(" ", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Colors.grey[500]),),
padding: EdgeInsets.symmetric(horizontal: 32),
),
SizedBox(height: 5),
StreamBuilder(
stream: FirebaseFirestore.instance.collection("payments").where('participants', arrayContains: userActive).snapshots(),
builder: (context, snapshot){
checkDatabase();
return Container ( child:ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
padding: EdgeInsets.all(0),
controller: ScrollController(keepScrollOffset: false),
itemBuilder: (context, index){
DocumentSnapshot documentSnapshot = snapshot.data.docs[index];
//if(snapshot.connectionState == ConnectionState.active && snapshot.hasData) {
if(userHasData == 1){
print(" no Data!!!");
return Center(child: Text("No Data"));
}
else if (userHasData == 2){
print("Found Data!!!");
if(documentSnapshot.data()["receiver_name"] == userActive ) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 32,vertical: 5),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.all(Radius.circular(18))
),
child: Icon(Icons.attach_money, color: Colors.lightBlue[900],),
padding: EdgeInsets.all(12),
),
SizedBox(width: 16,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Recieved", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.grey[900]),) ,
Text("" + documentSnapshot.data()["currency_received"] + documentSnapshot.data()["amount_received"], style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Colors.grey[500]),),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text("+ " + documentSnapshot.data()["currency_sent"] + documentSnapshot.data()["amount_paid"].toString(), style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.lightGreen),),
Text(documentSnapshot.data()["date"].toDate().toString(), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Colors.grey[500]),),
],
),
],
),
);
}else if (documentSnapshot.data()["sender_name"] == userActive){
return Container(
margin: EdgeInsets.symmetric(horizontal: 32,vertical: 5),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.all(Radius.circular(18))
),
child: Icon(Icons.attach_money, color: Colors.lightBlue[900],),
padding: EdgeInsets.all(12),
),
SizedBox(width: 16,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Sent", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.grey[900]),) ,
Text("" + documentSnapshot.data()["currency_received"] + documentSnapshot.data()["amount_received"], style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Colors.grey[500]),),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text("- " + documentSnapshot.data()["currency_sent"] + documentSnapshot.data()["amount_paid"].toString(), style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.orange),),
Text(documentSnapshot.data()["date"].toDate().toString(), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Colors.grey[500]),),
],
),
],
),
);
}
}
// } return Center(child: const CircularProgressIndicator());
}
)
);
}
),
],
),
controller: scrollController,
),
);
},
initialChildSize: 0.65,
minChildSize: 0.65,
maxChildSize: 1,
)
],
),
);
}
}

Try using .exists :
final docSnapshot = await Firestore.instance.collection('payments').document("document_id").get();
if (docSnapshot.exists){
//document exists
}
else{
//document does not exists
}
for all documents:
final doc = await Firestore.instance.collection('payments').getDocuments();
if (doc.documents.isEmpty){
//Collection is empty
}
else{
//collection has documents
}
You can apply the logic before using it in the element, like on start of the class then use futureBuilder. You can set a bool using the above logic and then using the visibility widget to show the futureBuilder only if the document is available.
For your case:
final docSnapshot = await Firestore.instance
.collection('bus_information_user')
.where('participants', arrayContains: userActive)
.getDocuments();
if(docSnapshot.documents.isEmpty){
// Your queried dosuments does not exist
}
else{
// Your queried dosuments does exist
}
Ps:. I have not tried out the last part but should do the job.

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)

Flutter: Unable to make the Form scroll when the Keyboard is open

In my application, I am using a stack and a container. Within the container i have a form and its fields. Below is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class Login extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: LoginUI(),
);
}
}
class LoginUI extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return LoginState();
}
}
class LoginState extends State<LoginUI> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Container(
height: double.infinity,
width: double.infinity,
child:
Stack(
fit: StackFit.loose,
children: <Widget>[
SafeArea(
child: Container(
margin: EdgeInsets.only(top: 25),
child: Image.asset("assets/images/login_image.png"),
),
),
Positioned(
top: 275,
child: Container(
height: 600,
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
margin:
EdgeInsets.only(top: 20, left: 10, right: 10),
child: Image.asset(
"assets/images/logo_2.png"),
),
)
],
),
Form(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 40,
),
child: SizedBox(
width: MediaQuery.of(context).size.width * .90,
height: 36,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Phone",
),
),
)),
Container(
margin: EdgeInsets.only(
top: 15,
),
child: SizedBox(
height: 36,
width: MediaQuery.of(context).size.width * .90,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(
top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Password",
),
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
margin: EdgeInsets.only(
top: 1, left: 10, right: 10),
child: FlatButton(
onPressed: () {},
child: Text("Forgot Password?",
style: TextStyle(
fontFamily: 'Roboto-Medium',
fontSize: 14.0,
letterSpacing: 1.25,
color:
Color.fromRGBO(75, 56, 137, 80))),
)),
),
Container(
margin:
EdgeInsets.only(top: 1, left: 10, right: 10),
child: SizedBox(
width: MediaQuery.of(context).size.width * .90,
child: RaisedButton(
color: Color.fromRGBO(75, 56, 137, 80),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(18.0),
side: BorderSide(
color:
Color.fromRGBO(75, 56, 137, 80))),
child: Text(
"LOGIN",
style: Theme.of(context).textTheme.button,
),
onPressed: () {
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(
content:
Text('Processing Data')));
}
},
),
))
],
),
),
Container(
margin: EdgeInsets.only(top: 1, left: 10, right: 10),
child: FlatButton(
onPressed: () {},
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "Not a member yet? ",
style: TextStyle(fontFamily: 'Roboto-Regular', fontSize: 14.0, letterSpacing: 0.25, color:Color.fromRGBO(75, 56, 137, 80 )),
),
TextSpan(
text: "Create an Account",
style: TextStyle(decoration: TextDecoration.underline, fontFamily: 'Roboto-Regular', fontSize: 14.0, letterSpacing: 0.25, color:Color.fromRGBO(75, 56, 137, 80 ),
),)
]),
),
)),
],
),
),
),
],
)
//child: Image.asset("assets/images/login_image.png"),
);
}
Widget _buildForm() {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: ImageIcon(
AssetImage("assets/images/email_24px.png"),
color: Colors.white,
),
margin: EdgeInsets.only(right: 5, bottom: 30)),
),
Flexible(
flex: 7,
child: SizedBox(
height: 80,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Email",
),
),
))
],
),
Container(
margin: EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Container(
child: ImageIcon(
AssetImage("assets/images/lock_24px.png"),
color: Colors.white,
),
margin: EdgeInsets.only(right: 5, bottom: 30),
),
),
Flexible(
flex: 7,
child: SizedBox(
height: 80,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
contentPadding:
const EdgeInsets.only(top: 2, bottom: 2, left: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Password",
),
),
))
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text(
"Forgot Password?",
style: Theme.of(context).textTheme.body1,
),
onPressed: () {},
),
],
),
),
Container(
margin: EdgeInsets.only(top: 40, left: 25, right: 10, bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: SizedBox(
width: double.infinity,
height: 45,
child: RaisedButton(
color: Color.fromRGBO(0, 72, 128, 100),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side:
BorderSide(color: Color.fromRGBO(0, 72, 128, 100))),
child: Text(
"LOGIN",
style: Theme.of(context).textTheme.button,
),
onPressed: () {
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
),
))
],
),
)
],
),
);
}
#override
void initState() {
// TODO: implement initState
super.initState();
}
}
My view is as follows
when the keyboard is open, the user must close it to access the login button. This is because this cannot be scrolled. I tried adding SingleScrollView and ListView below the main image and wrap the rest with it, but that didnt work. It only made the content disappear.
How can i make sure the fORM section is scrollable?

You can wrap your whole widget with SingleChildScrollView and then ConstrainedBox as follows:
Scaffold(
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: Container(
child: yourWidget()
You can see the related answer here: https://stackoverflow.com/a/59783374/12709039

Using Stack to align Containers in Flutter

I want the Search (TextFormField) bar to look like this and the background image to curve in the container:
This is the Code, I tried to Stack the Container and Search Bar together and then Align the search bar using Positioned, but couldn't do it.
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
alignment: Alignment.topCenter,
color:Colors.blueAccent,
height:250.0,
/*decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15.0))
),*/
//child: Image.asset("assets/bgImage.jpg"),
),
Positioned(
top: 155.0,
right: 0.0,
left: 0.0,
child: Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
/*suffixIcon: IconButton(
icon: Icon(
Icons.clear,
),
onPressed: _clearSearch,
),*/
filled: true,
),
//onSubmitted :
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20.0,),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
),
I tried to cover all of them in the single Stack but they stacked over each other and I couldn't arrange them one after another vertically.

I've made changes to your code to do what you are trying to achieve. Please take a look:
SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
alignment: Alignment.topCenter,
height:250.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.elliptical(30,8),
bottomRight: Radius.elliptical(30,8),
),
color:Colors.blueAccent,
),
//child: Image.asset("assets/bgImage.jpg"),
),
Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.only(top: 223, left: 55, right: 55),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
filled: true,
),
//onSubmitted :
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20.0, top: 20),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
);

This should work for you
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 30.0),
alignment: Alignment.topCenter,
height:250.0,
decoration: BoxDecoration(
color:Colors.blueAccent,
borderRadius: BorderRadius.only(
bottomLeft: Radius.elliptical(25, 10),
bottomRight: Radius.elliptical(25, 10),
)
),
//child: Image.asset("assets/bgImage.jpg"),
),
Positioned(
top: 200.0,
right: 0.0,
left: 0.0,
child: Container(
//color: Colors.white,
width: 400.0,
padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 55.0),
child: TextField(
decoration: InputDecoration(
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
hintText: 'Search',
hintStyle: TextStyle(
fontSize: 18.0
),
prefixIcon: Icon(
Icons.search,
size: 30.0,
),
/*suffixIcon: IconButton(
icon: Icon(
Icons.clear,
),
onPressed: _clearSearch,
),*/
filled: true,
),
//onSubmitted :
),
),
),
],
),
Padding(
padding: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0,
bottom: 20.0,
),
child: Card(
elevation: 6.0,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundColor: Colors.blue,
),
SizedBox(height: 5.0,),
Text('Jaipur')
],
),
),
],
),
),
),
),
]
),
),
),
);
}

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 make validation stepper when form inside bottomsheet? - android

Related

Widget Expanded height according to Listview content

how to check if my cloud firestore collection contains contains any documents

Bottom oveflowed by 82 pixels in flutter

Flutter: Unable to make the Form scroll when the Keyboard is open

Using Stack to align Containers in Flutter

Categories

Resources