use textField and listview.builder in bottom sheet

use textField and listview.builder in bottom sheet - android

Hey everyone I'm new to flutter and I have a problem.
I want to create an application that users after tapping on the Btn the bottom sheet will be open and after that ( here problem ) show the text field(for search) and the listView.
problem: when I do this nothing show me( even the bottom sheet don't appear)
this is my code :
enter code here
GestureDetector(
onTap: () {
showModalBottomSheet(
// ---------------------//
context: context,
builder: (context) {
return Container(
color: Color(0xff737373),
// to make the radius visible
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))),
child: countriesInfo == null
? Center(
child: CircularProgressIndicator(),
)
: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
child: TextField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: 'country',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
),
),
ListView.builder(
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
_selectItem(countriesInfo[index]);
},
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
height: 50,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 10, offset: Offset(0, 10))],
),
child: Row(
children: [
Image.network(
countriesInfo[index]._flag,
width: 50,
height: 50,
),
Text(
countriesInfo[index]._name,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
),
],
), // name of the country
),
);
},
itemCount: countriesInfo == null ? 0 : countriesInfo.length,
),
],
)),
);
}); // end bottom nav
},
child: Container(
width: double.infinity,
margin: EdgeInsets.all(35),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(color: Color(0xFFA3A3A3), borderRadius: BorderRadius.all(Radius.circular(15))),
child: Center(
child: Text(
"${selectedCountry == null ? countriesInfo[0].name : selectedCountry!.name.toString()}",
style: TextStyle(fontSize: 18),
),
),
),
),
if know any documentation or idea tell me please thank you.

Related

Bottomsheet not allowing the container to show its properties in Flutter

I want to have a draggable bottom sheet for which I have written the code. But the problem is bottom sheet is shown properly but the body has a container and that is not shown. Can somebody help me with the same. If I run the code without bottomsheet it runs properly. I am unable to figure out where is the problem
import 'package:flutter/material.dart';
class HomePage1 extends StatelessWidget {
const HomePage1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: const Color(0xFF1E2129),
body: Stack(
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
],
),
bottomSheet: DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
),
);
}
}

DraggableScrollableSheet is always display in bottom no need to attached with bottom sheet,
Just drag into stack (as mentioned below)
Stack(
alignment: AlignmentDirectional.topStart,
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
color: Color(0xFF1E2129),
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
)
],
),
See the Output...

you should try a function called bottom Model sheet and make it use in your project..
https://api.flutter.dev/flutter/material/showModalBottomSheet.html
you can find it on flutter api

How can I vertically center all the widgets inside a ListView?

I have this main screen with a ListView:
Screenshot
I decided to use a ListView as it resulted in screen overflow error each time the keyboard opened up.
This is my code:
ListView(children: [
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(top: 46.0, bottom: 8),
child: ClipRect(
child: Image.asset(
'images/icon.png',
scale: 2,
),
),
),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
child: TextField(
controller: _word,
textAlign: TextAlign.center,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
_word.text = '';
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
filled: true,
fillColor: Colors.lightGreen[200],
hintStyle: TextStyle(color: Colors.green),
hintText: 'Enter a word',
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(top: 16, bottom: 12),
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 65, height: 65),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(CircleBorder())),
child: Icon(Icons.search),
onPressed: () async {
detectNetStatus(context);
String word = _word.text;
_word.text = '';
Navigator.push(context, MaterialPageRoute(builder: (context) {
return word == '' ? RandomResults() : Results(word);
}));
}),
),
),
),
]),
I've also used the Align widget on all the three screen widgets. But it seems that the use of Align practically has no effect on the placement of the three widgets.
I want to place the three widgets in such a way that the space above and below the three widgets is equal (or in other words, I want to group and place them in a vertically centered alignment).

This code will help you to get the concepet. if you need layoutSize wrap Stack with LayoutoutBuilder to get the constrains.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(top: 46.0, bottom: 8),
child: ClipRect(
child: Image.asset(
// 'images/icon.png',
"assets/me.jpg",
scale: 2,
),
),
),
),
Align(
/// change this value according to your desire
alignment: Alignment(0, .2),
child: ListView(
shrinkWrap: true,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24.0, vertical: 12.0),
child: TextField(
// controller: _word,F
textAlign: TextAlign.center,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(Icons.close),
onPressed: () {
// _word.text = '';
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
filled: true,
fillColor: Colors.lightGreen[200],
hintStyle: TextStyle(color: Colors.green),
hintText: 'Enter a word',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 16, bottom: 12),
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 65, height: 65),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(
CircleBorder())),
child: Icon(Icons.search),
onPressed: () async {
// detectNetStatus(context);
// String word = _word.text;
// _word.text = '';
// Navigator.push(context,
// MaterialPageRoute(builder: (context) {
// return word == '' ? RandomResults() : Results(word);
// }));
}),
),
),
],
),
),
],
),
);
}

Here is the solution for your code to align the widget with centered with using of the Flex widget.
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: viewportConstraints.copyWith(
minHeight: viewportConstraints.maxHeight,
maxHeight: double.infinity,
),
child: Flex(
direction: Axis.vertical,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRect(
child: Image.asset(
"images/icon.png",
scale: 2,
),
),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10.0, vertical: 30.0),
child: TextField(
controller: _word,
textAlign: TextAlign.center,
decoration: InputDecoration(
suffixIcon: IconButton(
color: Colors.green,
icon: Icon(Icons.close),
onPressed: () {
_word.text = '';
},
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
filled: true,
fillColor: Colors.yellow[50],
hintStyle: TextStyle(color: Colors.green),
hintText: 'Enter a word',
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 65, height: 65),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<CircleBorder>(
CircleBorder())),
child: Icon(Icons.search),
onPressed: () async {
detectNetStatus(context);
String word = _word.text;
_word.text = '';
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return word == '' ? RandomResults() : Results(word);
}));
}),
),
),
],
),
),
);
},
),
);
}

How to make validation stepper when form inside bottomsheet?

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';
}

Container text and icons alignment- need to align this icon to right of this container

I need to make this favourite icon to the right of the container. I can use padding but is it ok? I mean is it going to work with all devices. Is there any solid way to align these 3 containers? I made a list view because I am adding more stuff like this one. can you guys help me with this?
Here is the image
Here is my code
class _OrdersState extends State<Orders> {
#override
Widget build(BuildContext context) {
return Material(
child: SafeArea(
child: Stack(
children: [
Background(),
Positioned(
top: 10,
left: 5,
child: SizedBox(
// width: 10,
// height: 10,
child: Container(
color: Colors.transparent,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
//go back
onPressed: () => Navigator.of(context).pop(),
),
),
),
),
Positioned(
top: 90,
left: 22,
right: 22,
child: SizedBox(
width: 350,
height: 900,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
),
],
),
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
),
),
),
),
],
),
),
);
}
}

In the Row try to use and Expanded widget like this
Row(
children: [
Expanded(
child: Row(
children: [
Container(
color: Colors.blue,
margin: EdgeInsets.all(2),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'3:32',
style: TextStyle(fontSize: 20),
),
),
),
Container(
color: Colors.red,
child: Text(
'Order 1',
style: TextStyle(fontSize: 20),
),
),
],
),
),
Container(
color: Colors.amber,
child: Icon(Icons.favorite),
)
],
)

How to center the Widget inside column contained inside Singlechild Scrollview?

I am designing a view for creating a group of users from firestore data. I want a view like whatsapp type create a group design. Below is my code :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
titleSpacing: 0.0,
centerTitle: true,
automaticallyImplyLeading: true,
leading: _isSearching ? const BackButton() : Container(),
title: _isSearching ? _buildSearchField() : Text("Create Group"),
actions: _buildActions(),
),
body: _buildGroupWidget(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrange,
elevation: 5.0,
onPressed: () {
// create a group
createGroup();
},
child: Icon(
Icons.send,
color: Colors.white,
),
),
);
}
Widget _buildGroupWidget() {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
selectedUserList != null && selectedUserList.length > 0
? Container(
height: 90.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: selectedUserList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
selectedUserList.removeAt(index);
setState(() {});
},
child: Container(
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
child: Column(
children: <Widget>[
Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
// color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
color: Colors.primaries[
index % Colors.primaries.length],
),
),
Container(
height: 20.0,
width: 50.0,
child: Center(
child: Text(
selectedUserList[index].userName,
softWrap: true,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
);
},
),
)
: Container(),
Container(
alignment: Alignment.centerLeft,
height: 30,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.deepOrange,
boxShadow: [
BoxShadow(
color: Colors.orange, blurRadius: 5, offset: Offset(0, 2)),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Text(
"Contacts",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
userList != null && userList.length > 0
? ListView.builder(
shrinkWrap: true,
itemCount: userList.length,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
if (selectedUserList.contains(userList[index])) {
selectedUserList.remove(userList[index]);
} else {
selectedUserList.add(userList[index]);
}
setState(() {});
},
title: Text(userList[index].userName),
subtitle: Text(userList[index].userContact),
leading: CircleAvatar(
backgroundColor: Colors.primaries[index],
),
);
},
)
: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)))
],
),
);
}
The problem with my code is i want to center my last widget which is center widget which will be seen when there is no data. I want to set it to the center of the screen.
But, it not get to the center of the screen.
I have already tried with Expanded, Flex and other solutions from other resource references. But, it doesn't work for me.
Can anyone suggest me how to center my last widget ?

I think expanded should work wrapping your last widget.
Still, if it doesn't work for you then i you can remove the height of your other 2 widgets from full screen as your both widgets have static height which is 120 total here.
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height - 120,
child: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)),
))
This will solve your issue for your case.

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.

use textField and listview.builder in bottom sheet - android

Related

Bottomsheet not allowing the container to show its properties in Flutter

How can I vertically center all the widgets inside a ListView?

How to make validation stepper when form inside bottomsheet?

Container text and icons alignment- need to align this icon to right of this container

How to center the Widget inside column contained inside Singlechild Scrollview?

Categories

Resources