Duplicate GlobalKey detected in Widget Tree or Multiple Widgets used the same GlobalKey - flutter

I've tried to create form to input something from textfield to database using rest service, it worked just fine from the first try, but it got error the next time I tried, the error said there was something wrong with the GlobalkKey, so it's maybe around here.
class _DeliveryRecieverState extends State<DeliveryReciever> {
List datas;
File imagePath;
bool validasi = false;
String namaPenerima;
final _keyFormReceiver = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
datas = this.datas;
print(datas);
return DefaultTabController(
length: 1,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
bottom: TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.local_shipping),
text: "Bukti Delivery",
),
],
),
elevation: 0.1,
// backgroundColor: Colors.cyan[800],
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF17ead9), Color(0xFF6078ea)]),
),
),
title: Text(
"Delivery",
style: TextStyle(
fontFamily: "Popins-Bold",
fontSize: ScreenUtil.getInstance().setSp(46),
letterSpacing: .6,
fontWeight: FontWeight.bold,
),
),
actions: <Widget>[
],
),
body: TabBarView(
children: <Widget>[
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(
left: 15.0, right: 15.0, top: 15.0, bottom: 15.0),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: ScreenUtil.getInstance().setHeight(470),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 15.0),
blurRadius: 15.0),
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, -10.0),
blurRadius: 10.0)
]),
child: Padding(
padding: EdgeInsets.only(
left: 16.0, right: 16.0, top: 16.0),
child: Form(
key: _keyFormReceiver,
autovalidate: validasi,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Nama Penerima",
style: TextStyle(
fontSize:
ScreenUtil.getInstance().setSp(30),
fontFamily: "Poppins-Bold",
letterSpacing: .6),
),
SizedBox(
height:
ScreenUtil.getInstance().setHeight(30),
),
TextFormField(
validator: validasiReceivername,
onSaved: (String nama) {
namaPenerima = nama;
},
decoration: InputDecoration(
hintText: "Nama Penerima",
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 12.0)),
),
SizedBox(
height:
ScreenUtil.getInstance().setHeight(50),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: RaisedButton(
elevation: 7.0,
color: Colors.green,
padding: EdgeInsets.all(20.0),
child: Text("LANJUT"),
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10)),
onPressed: () {
parseData();
},
),
),
],
),
],
),
)),
),
],
),
),
),
],
),
bottomNavigationBar: Container(
height: 55.0,
child: BottomAppBar(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF17ead9), Color(0xFF6078ea)]),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.home, color: Colors.white),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => halamanUtama()),
);
},
),
IconButton(
icon: Icon(Icons.nature_people, color: Colors.white),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UpcomingDelivery()),
);
},
),
IconButton(
icon: Icon(Icons.local_shipping, color: Colors.white),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ListDelivery()),
);
},
),
],
),
),
),
),
));
}
String validasiReceivername(String value) {
if (value.length == 0) {
//Toast.show("Password more than 4 ", context,duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
return "Nama penerima tidak boleh kosong.";
} else {
return null;
}
}
void parseData() async {
if (_keyFormReceiver.currentState.validate()) {
_keyFormReceiver.currentState.save();
_keyFormReceiver.currentState.reset();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CustomerSignatureProof(
created_name: widget.created_name,
wmsorders_id: widget.wmsorders_id,
imagePath: widget.imagePath,
imageName: widget.imageName,
receiverName: namaPenerima,
upcoming_id: widget.upcoming_id,
upcoming_sku: widget.upcoming_sku,
upcoming_sak: widget.upcoming_sak,
upcoming_qty: widget.upcoming_qty,
upcoming_shipstatid: widget.upcoming_shipstatid,
upcoming_picname: widget.upcoming_picname,
upcoming_pictelp: widget.upcoming_pictelp,
upcoming_ordermultipleid: widget.upcoming_ordermultipleid,
upcoming_orderdetid: widget.upcoming_orderdetid,
upcoming_coordinatorid: widget.upcoming_coordinatorid,
upcoming_shipmentid: widget.upcoming_shipmentid)));
}
}
}
Here is the error in terminal,
Have anybody face the same probles as me, please give your guidance..

Related

How to create a truly responsive design in flutter using stack and positioned widget

I thought of using Stack and Positioned widget thinking it will be a responsive design by default, i even tried the Sizer plugin but for some reason I unable to create a truly responsive design and my widgets are all over the place on different screen
please take a look at my code
#override
Widget build(BuildContext context) {
super.build(context);
return Stack(
children: [
Googlelutter(mapKey: _mapKey, osmController: osmController),
Positioned(
top: 60.0,
left: 0.0,
right: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Consumer<AppData>(
builder: (ctx, dsc, child) => (ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(50))),
backgroundColor: dsc.driverStatusClr),
// color: dsc.driverStatusClr,
onPressed: () async {
if (isDriverAvailable != true) {
isDriverAvailable = true;
makeDriverOnlineNow();
getLocationLiveUpdates();
Provider.of<AppData>(context, listen: false)
.buttonOnline(Colors.green.shade300, "Online");
await UserSimplePrefences.setButtonStatus(false);
// });
displayToastMessage("You are Online now", context);
} else {
Provider.of<AppData>(context, listen: false)
.buttonOnline(Colors.black54, "Offline");
driverOffline();
IsolateNameServer.removePortNameMapping(_isolateName);
BackgroundLocator.unRegisterLocationUpdate();
displayToastMessage("You are Offline now", context);
isDriverAvailable = false;
await UserSimplePrefences.setButtonStatus(true);
onStop();
}
},
child: Padding(
padding: EdgeInsets.all(17),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
dsc.driverStatusTxt,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Icon(
Icons.phone_android,
color: Colors.white,
size: 26,
)
],
),
),
)),
),
),
],
),
),
Positioned(
top: 700.0,
right: 22.0,
child: GestureDetector(
onTap: () {
osmController.currentLocation();
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22.0),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(
0.7,
0.7,
),
)
]),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.location_on,
color: Colors.black,
),
radius: 20.0,
),
),
),
),
Positioned(
top: 100.0,
right: 22.0,
child: GestureDetector(
onTap: () async {
//FirebaseAuth.instance.signOut();
await osmController.enableTracking();
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(22.0),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(
0.7,
0.7,
),
)
]),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.track_changes,
color: Colors.black,
),
radius: 20.0,
),
),
),
),
],
);
}
and let me know how can I fix it ?
Something like this... with respect to device height width.
double deviceHeight:MediaQuery.of(context).size.height;
double deviceWidth=MediaQuery.of(context).size.width;
double width=350;
double height=500;
void checkDevice(){
if(deviceWidth<600) return;
if(deviceWidth>600 &&
deviceWidth<1024){
//for tablet size
width=800;
height=800;
}else{
//for web pages size in desktop
width=1500;
height=1500;
}
}
#override
Widget build(BuildContext context) {
super.build(context);
return SizedBox(width:deviceWidth,height:deviceHeight:child:Fittedbox(child: SizedBox(width:width,height:height,childStack(
children: [
Googlelutter(mapKey: _mapKey, osmController: osmController),
Positioned(
top: height*0.7,
left: 0.0,
right: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: width*0.1),
child: Consumer<AppData>(
builder: (ctx, dsc, child) => (ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(width*0.7))),
backgroundColor: dsc.driverStatusClr),
// color: dsc.driverStatusClr,
onPressed: () async {
if (isDriverAvailable != true) {
isDriverAvailable = true;
makeDriverOnlineNow();
getLocationLiveUpdates();
Provider.of<AppData>(context, listen: false)
.buttonOnline(Colors.green.shade300, "Online");
await UserSimplePrefences.setButtonStatus(false);
// });
displayToastMessage("You are Online now", context);
} else {
Provider.of<AppData>(context, listen: false)
.buttonOnline(Colors.black54, "Offline");
driverOffline();
IsolateNameServer.removePortNameMapping(_isolateName);
BackgroundLocator.unRegisterLocationUpdate();
displayToastMessage("You are Offline now", context);
isDriverAvailable = false;
await UserSimplePrefences.setButtonStatus(true);
onStop();
}
},
child: Padding(
padding: EdgeInsets.all(width*0.01),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
dsc.driverStatusTxt,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Icon(
Icons.phone_android,
color: Colors.white,
size: width*0.05,
)
],
),
),
)),
),
),
],
),
),
Positioned(
top: height*0.7,
right: width*0.2,
child: GestureDetector(
onTap: () {
osmController.currentLocation();
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: width*0.07,BorderRadius.circular(width*0.05),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius:width*0.005,
spreadRadius: width*0.007,
offset: Offset(
width*0.007,
width*0.007,
),
)
]),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.location_on,
color: Colors.black,
),
radius: width*0.07,
),
),
),
),
Positioned(
top: height*0.07,
right: width*0.07,
child: GestureDetector(
onTap: () async {
//FirebaseAuth.instance.signOut();
await osmController.enableTracking();
},
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(width*0.07),
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: width*0.007,
spreadRadius: width*0.005,
offset: Offset(
width*0.005,
width*0.005,
),
)
]),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(
Icons.track_changes,
color: Colors.black,
),
radius: width*0.01,
),
),
),
),
],))),
);
}

Delete button does not delete the content

There are no error messages, but the delete button does not delete the selected content when I click on Delete.
The page shows a series of activities in sequence. The user should be able to edit or delete the individual activity when selected.
I do not find and understand the problem, can you help me find the error please ?
This is the code:
class AllTasksView extends GetView<HomeController> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: Get.height,
width: Get.width,
color: Theme.of(context).scaffoldBackgroundColor,
//padding: EdgeInsets.symmetric(horizontal: 30, vertical: 50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 50, left: 25, right: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'All Tasks',
style: kSubHeadTextStyle.copyWith(
color: Theme.of(context).primaryColorDark),
),
IconButton(
icon: Icon(
// FontAwesomeIcons.history,
FontAwesomeIcons.clockRotateLeft,
color: Theme.of(context).primaryColor,
size: 24,
),
onPressed: () {
Get.to(() => PastTasksView());
},
),
],
),
),
SizedBox(height: Get.height * 0.012),
GetBuilder<HomeController>(
id: 1,
builder: (controller) {
return Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
final task = controller.commingTasks[index]!;
return Slidable(
// actionPane: SlidableBehindActionPane(),
// actionExtentRatio: 0.2,
// controller: controller.slideC,
child: ExpandedContainer(
icon: task.taskImage,
title: task.taskTitle,
time: task.startTime,
desc: task.taskDesc,
ifDate: true,
date: DateFormat.yMMMd().format(task.taskDate!),
),
startActionPane: ActionPane(
motion: BehindMotion(),
children: [
SlidableAction(
onPressed: (context) {
// controller.slideC.activeState?.close();
Slidable.of(context)?.close();
controller.preUpdateTask(task);
showModalBottomSheet(
backgroundColor: Colors.transparent,
isScrollControlled: true,
context: context,
builder: (context) {
return BottomSheetContent(
buttonText: 'Update Task',
onSubmit: () {
controller.updateTask(task);
},
);
},
) as IconData;
},
label: "Update",
),
],
),
endActionPane: ActionPane(
motion: BehindMotion(),
children: [
SlidableAction(
onPressed: (context) {
// controller.slideC.activeState?.close();
Slidable.of(context)?.close();
controller.customDialogDel(context, task);
},
label: "Delete",
),
],
),
);
},
itemCount: controller.commingTasks.length,
),
);
},
),
],
),
),
);
}
}
This is the code to delete task by id
/// [ function to delete task by ID ]
deleteTask(Task task) async {
int index = allTasks.indexOf(task);
allTasks.removeAt(index);
taskRoutine();
reWriteTasks();
update([1, true]);
print(index);
}
And this is the code to delete where is the confirm dialog:
/// [ function to delete confirm dialog ]
Future<dynamic> customDialogDel(BuildContext context, Task task) {
return Get.dialog(Container(
margin: EdgeInsets.symmetric(
vertical: Get.height * 0.35, horizontal: Get.width * 0.18),
padding: EdgeInsets.all(20),
width: Get.width * 0.8,
height: Get.width * 0.8,
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(20),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Delete Task!',
style: kSubHeadTextStyle.copyWith(
fontSize: 20,
color: Theme.of(context).primaryColorDark,
),
),
SizedBox(height: 20),
Text(
'Are you sure?',
style: kSubHeadTextStyle.copyWith(
fontSize: 16,
color: Theme.of(context).primaryColorDark,
),
),
SizedBox(height: 40),
Container(
width: 140,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Get.back();
},
child: Container(
padding: EdgeInsets.symmetric(
vertical: 10, horizontal: 15),
child: Text(
'No',
style: kSubHeadTextStyle.copyWith(
fontSize: 16,
color: Theme.of(context).primaryColorDark,
),
),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor),
borderRadius: BorderRadius.circular(10),
)),
),
SizedBox(width: 20),
GestureDetector(
onTap: () {
// slideC.activeState?.close();
Slidable.of(context)?.close();
deleteTask(task);
Get.back();
},
child: Container(
padding: EdgeInsets.symmetric(
vertical: 10, horizontal: 15),
child: Text(
'Yes',
style: kSubHeadTextStyle.copyWith(
fontSize: 16,
color: Theme.of(context).primaryColorDark,
),
),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
)),
)
]),
),
],
),
),
),
),
));
}
}

Slidable widget not wrapping around container

I am trying to make the slidable widget wrap around the child container like this:
but it comes like this:
The slidable widget comes from the edge of the screen rather than the child widget also there seems to be no animation, it just disappears ontap.
Slidable(
key: UniqueKey(),
actionPane: SlidableDrawerActionPane(),
actions: [
IconSlideAction(
color: Colors.redAccent,
icon: Icons.delete,
onTap: () {
todoController.todos.removeAt(index);
},
)
],
child: Container(
decoration: BoxDecoration(
color: Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding: const EdgeInsets.symmetric(
horizontal: 24.0, vertical: 15.0),
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
todoController.todos[index].title,
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8),
fontSize: 20.0),
),
],
),
Divider(
color: Color(0xFF707070),
),
Text(
todoController.todos[index].details,
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
],
),
),
),
),
u can use custom container in action widget like this:-
Widget slideBackground(BuildContext context, Function onTap, String text) {
return Container(
height: 80.h,
width: 120,
// color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: IconSlideAction(
caption: '',
color: Colors.red,
closeOnTap: true,
icon: Icons.delete,
// icon: Icons.delete,
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: Text(text),
actions: <Widget>[
CupertinoButton(
child: const Text(
"Cancel",
style: TextStyle(color: Colors.black),
),
onPressed: () {
Navigator.of(context).pop();
},
),
CupertinoButton(
child: const Text(
"Delete",
style: TextStyle(color: Colors.red),
),
onPressed: () {
onTap();
Navigator.of(context).pop();
},
),
],
);
});
},
),
),
),
)
],
),
);
}```

How to align rows at bottom of the screen along with other containers at top

I am trying to achieve a UI in which there are 2 buttons in the center and then afterwards there are 2 rows at the bottom of the screen fixed respective to screen sizes I will stay at its place, but I'm unable to do it in my case I'm using Column and all the other containers and rows are in it.
Desired Result on emulator is fine
What I am getting in real device
Here is the code.
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fill,
),
Padding(
padding: const EdgeInsets.only(
top: 550,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 650,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 750,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 760,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)
],
),
),
);
}
}
Use this method its will do the job. Background image will appear and you can align your widgets using the Alignment property
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/intropage.png',
),
)),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 250.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 500.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)),
);
}
}
Try to wrap your widgets inside
Positioned(
Align(
alignment: Alignment.bottomCenter,
child: _your_widget_here()
It's not recommanded to use fix value for the layout.
Stack here it's not necessary.
A simple Spacer Widget can the work. But there are multiple way to do it.
import 'package:flutter/material.dart';
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fitWidth,
),
const Spacer(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
],
),
),
);
}
}
If you can use standard buttons, use them. I used ElevatedButton with custom styles, so please check it.
In general it is a bad idea to add accumulated top padding to each element. Screens sizes are different and your layout will be failed on another screen size.
Please see my example of how to do this better.
Also I added other small improvements, maybe you will be interested in.
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
Widget _createButton({
required VoidCallback onPressed,
required Widget child,
required Color textColor,
}) {
return ElevatedButton(
onPressed: onPressed,
child: child,
style: ElevatedButton.styleFrom(
elevation: 0.0,
primary: Colors.white,
onPrimary: textColor,
textStyle: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
padding: EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
),
fixedSize: Size(180.0, 60.0),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 400.0, //your image height
child: Image.network(
"https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270",
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_createButton(
child: Text("Sign Up"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
//your page
builder: (context) => Container(),
),
);
},
textColor: Colors.black,
),
SizedBox(height: 32.0),
_createButton(
child: Text("Sign In"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
//your page
builder: (context) => Container(),
),
);
},
textColor: Color(0xFFFE6B01),
),
SizedBox(height: 32.0),
],
),
),
],
),
),
_BottomSection(),
],
),
),
);
}
}
class _BottomSection extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Expanded(
child: Divider(
height: 2,
thickness: 2,
color: Colors.white,
),
),
SizedBox(width: 10),
Text(
"Please Read",
style: TextStyle(color: Colors.white),
),
SizedBox(width: 10),
Expanded(
child: Divider(
height: 2,
thickness: 2,
color: Colors.white,
),
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 6.0,
right: 20.0,
left: 20.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Container()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Container()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
],
),
),
],
);
}
}

How to show data in function as a loop?

I am beginner in flutter and following some tutorials. I need to know how can I show data in a function by looping? For now, I am calling function 2 or 3 times to show data on how its possible ill call function just one time and shop my data which is in array?
Here. my data file which name is post_model.dart
class Post {
String authorName;
String authorImageUrl;
String timeAgo;
String imageUrl;
Post({
this.authorName,
this.authorImageUrl,
this.timeAgo,
this.imageUrl,
});
}
final List<Post> posts = [
Post(
authorName: 'Umaiz Khan',
authorImageUrl: 'assets/images/user0.png',
timeAgo: '5 min',
imageUrl: 'assets/images/post0.jpg',
),
Post(
authorName: 'Saad ahmed',
authorImageUrl: 'assets/images/user1.png',
timeAgo: '10 min',
imageUrl: 'assets/images/post1.jpg',
),
Post(
authorName: 'Hiba',
authorImageUrl: 'assets/images/user4.png',
timeAgo: '10 min',
imageUrl: 'assets/images/post2.jpg',
),
];
final List<String> stories = [
'assets/images/user1.png',
'assets/images/user2.png',
'assets/images/user3.png',
'assets/images/user4.png',
'assets/images/user0.png',
'assets/images/user1.png',
'assets/images/user2.png',
'assets/images/user3.png',
];
Here is my code at the end of the line you can see I am calling function and sending index. I need to call the function just one time and it will show all my arrays in data. Thanks in advance
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:mytravel/screens/loginPage.dart';
import 'package:mytravel/screens/guidePlacePage.dart';
import 'package:mytravel/models/post_model.dart';
import 'package:mytravel/screens/view_post_screen.dart';
class newsFeedPage extends StatefulWidget {
#override
_newsFeedPageState createState() => _newsFeedPageState();
}
class _newsFeedPageState extends State<newsFeedPage> {
List<Widget> _buildPost() {
List<Widget> items = [];
items.add(
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Container(
width: double.infinity,
height: 560.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Column(
children: <Widget>[
ListTile(
leading: Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black45,
offset: Offset(0, 2),
blurRadius: 6.0,
),
],
),
child: CircleAvatar(
child: ClipOval(
child: Image(
height: 50.0,
width: 50.0,
image: AssetImage(posts[].authorImageUrl),
fit: BoxFit.cover,
),
),
),
),
title: Text(
posts[].authorName,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: Text(posts[].timeAgo),
trailing: IconButton(
icon: Icon(Icons.more_horiz),
color: Colors.black,
onPressed: () => print('More'),
),
),
InkWell(
onDoubleTap: () => print('Like post'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ViewPostScreen(
post: posts[],
),
),
);
},
child: Container(
margin: EdgeInsets.all(10.0),
width: double.infinity,
height: 400.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
BoxShadow(
color: Colors.black45,
offset: Offset(0, 5),
blurRadius: 8.0,
),
],
image: DecorationImage(
image: AssetImage(posts[].imageUrl),
fit: BoxFit.fitWidth,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.favorite_border),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2,515',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.chat),
iconSize: 30.0,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ViewPostScreen(
post: posts[],
),
),
);
},
),
Text(
'350',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(Icons.bookmark_border),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
),
],
),
),
),
);
for (var i = 0; i < posts.length; i++) {
items.add(_buildPost(i));
}
return items;
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFEDF0F6),
body: ListView(
physics: AlwaysScrollableScrollPhysics(),
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Social Travel',
style: TextStyle(
fontFamily: 'Billabong',
fontSize: 32.0,
),
),
],
),
),
ListView(
physics: AlwaysScrollableScrollPhysics(),
children: _buildPost(),
),
],
),
);
}
}
You can build the children array of your ListView in a new method like this :
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFEDF0F6),
body: ListView(
physics: AlwaysScrollableScrollPhysics(),
children: _buildListViewItems(),
),
);
}
List<Widget> _buildListViewItems() {
List<Widget> items = [];
items.add(
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Instagram',
style: TextStyle(
fontFamily: 'Billabong',
fontSize: 32.0,
),
),
],
),
),
);
for (var i = 0; i < posts.length; i++) {
items.add(_buildPost(i));
}
return items;
}