Flutter - CupertinoPicker in an alert dialog - flutter

I am stuck right now with the little app that I am trying to create.
The user when he will tap on an icon is supposed to get an alert dialog with 2 buttons (OK and Cancel), and in the body of the alert box, a Cupertino Picker. Below you will find the code. I am getting this error message.
Failed assertion: line 85 pos 15: 'children != null': is not true.
class Engage extends StatefulWidget {
Engage ({Key key}) : super(key:key);
#override
_EngageState createState() => _EngageState();
}
class _MyEngageState extends State<MyEngage> {
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[350])),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(3.0),
child: Container(
// margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[350])
),
child : Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
child: Column(
children: [
IconButton(
splashColor: Colors.lightGreenAccent,
icon : Image.asset('assets/icons/icon1',
height: iconHeighEngage,),
onPressed:(){
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('TEST'),
content: Container(
height: 350,
child: Column(
children: <Widget>[
CupertinoPicker(),
FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.pop(context);
},
)
],
),
));
});
},
),
Text('TEST')],
),
),

Give it a try to this!
Padding(
padding: const EdgeInsets.all(3.0),
child: Container(
// margin: const EdgeInsets.all(30.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[350])),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
child: Column(
children: [
IconButton(
splashColor: Colors.lightGreenAccent,
icon: Icon(
Icons.add,
),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext ctx) {
return AlertDialog(
title: Text('My Titile'),
content: Container(
height: 350,
width: 350.0,
child: Column(
children: <Widget>[
CupertinoPicker(
itemExtent: 200.0,
onSelectedItemChanged:
(int value) {
print("Test");
},
children: <Widget>[
FlatButton(
child: Container(
color:
Colors.orangeAccent,
width: 350.0,
height: 160.0,
child: Center(
child: Text(
"OK",
style: TextStyle(
fontSize: 20.0),
)),
),
onPressed: () {
Navigator.pop(context);
},
)
],
),
],
),
),
);
},
);
},
),
Text('TEST')
],
),
),
],
),
),
)
Note: The problem was, you weren't passing the parameters of CupertinoPicker()
EDIT :
First Initialize
int selected = 0;
and then:
Padding(
padding: const EdgeInsets.all(3.0),
child: Container(
padding: const EdgeInsets.all(10.0),
decoration:
BoxDecoration(border: Border.all(color: Colors.grey[350])),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
child: Column(
children: [
IconButton(
splashColor: Colors.lightGreenAccent,
icon: Icon(
Icons.add,
),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext ctx) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
backgroundColor: Colors.lightBlueAccent,
title: Text(
'My Dialog',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
content: Container(
height: 350.0,
width: 350.0,
child: Column(
children: <Widget>[
Expanded(
child: CupertinoPicker(
useMagnifier: true,
magnification: 1.5,
backgroundColor: Colors.white,
itemExtent: 40.0,
onSelectedItemChanged: (int index) {
print(selected);
setState(() {
selected = index;
});
print(selected);
},
children: <Widget>[
Text(
"Text 1",
style: TextStyle(
color: selected == 0
? Colors.blue
: Colors.black,
fontSize: 22.0),
),
Text(
"Text 2",
style: TextStyle(
color: selected == 1
? Colors.blue
: Colors.black,
fontSize: 22.0),
),
Text(
"Text 3",
style: TextStyle(
color: selected == 2
? Colors.blue
: Colors.black,
fontSize: 22.0),
),
],
),
)
],
),
),
);
},
);
},
);
},
),
Text('Add')
],
),
),
],
),
),
),
The code is tested and working pretty fine now!

Related

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

Flutter - show items in a list view with just the necessary length and borders

In my list view in a Flutter project, I need to show items i.e. pieces of text that are stored in a List variable. Each item (i.e. piece of text) will have rounded borders but the length of each item will vary according to the number of characters in the text. And on tapping each of the list item i.e. the piece of text, some action will take place.
Following is an image showing how the output should be:
Currently each list item takes the maximum size of the horizontally available space and text is aligned in the middle. But I want the background of each list item to be just containing the piece of text and not to be the full size horizontally and then text should be in the middle of the background. Current result is in the following image.
Code:
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
How can I achieve the list items to be as in the 1st screenshot ?
EDIT:
The above list view is inside the following code i.e. the following code should be appended to the above code and necessary brackets should be suffixed.
SingleChildScrollView(
// child: Container(
// padding: const EdgeInsets.only(top: 80, left: 24, right: 24),
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topich000'),
EDIT2:
I am pasting the full code (i.e. not only the list view related code as the list view is inside other code snippet) from my application below.
So when you post answer, make sure that you use the format of my full code below:
final List<String> names = <String>['Topic 1', 'Topic 2 ', 'Topic 3', 'Topic 4', 'Topic 5'];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child:Container(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
child: Container(
child: Padding(
padding:EdgeInsets.fromLTRB(3, 0,0,0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
Expanded(
child: TextButton(
onPressed: () {
print("Do something !");
Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index+1,
'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40.0)),
),
backgroundColor:
MaterialStateProperty.all(
//Colors.green[900]
Colors.white
)),
child:Text('${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
),
]
),
),
),
);
}
)
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => topicScreen(),
),
);
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);
}
Try removing the Expanded widget and remove minimumSize:MaterialStateProperty.all(Size(double.infinity, 14)) from your TextButton Widget.
Code:
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
margin: EdgeInsets.all(2),
// color: msgCount[index]>=10? Colors.blue[400] msgCount[index]>3? Colors.blue[100]: Colors.grey,
child: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
onPressed: () {
print("Do something!");
},
style: ButtonStyle(
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(40.0)),
),
backgroundColor: MaterialStateProperty.all(
Colors.white)),
child: Text(
'${names[index]} ',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
]),
),
),
);
})
Try below code and used UnconstrainedBox.
UnconstrainedBox means render at its natural size.
Your List:
List list = [
'Science',
'Mathematics',
'English',
'Mental Ability',
];
Your Widget:
ListView.builder(
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
UnconstrainedBox(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: InkWell(
onTap: () {
print('You Tapped on ${list[index]} subject');
},
child: Text(
list[index],
),
),
),
),
],
);
},
);
Result Screen->
You should try giving the widget in the builder method of the ListView.builder widget a height, specifically to your Container.
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: <your width here> <<<<<------
EDIT:
Working code.
final names = <String>[
'Topic 1',
'Topic 2 ',
'Topic 3',
'Topic 4',
'Topic 5'
];
return Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle.light,
title: const Text('Topics'),
),
body: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height, // or something simular :)
child: Column(
children: [
const Text('Select a Topic'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: names.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
width: 100,
margin: const EdgeInsets.all(2),
padding: const EdgeInsets.fromLTRB(3, 0, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () {
print("Do something !");
// Navigator.of(context).pushNamed("/subtopicScreen", arguments: {'index_found': index+1,
// 'uploadable_image_path':uploadable_image_path });
},
// );
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStateProperty.all(
const Size.fromWidth(100),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
40,
),
),
),
backgroundColor: MaterialStateProperty.all(
//Colors.green[900]
Colors.white,
),
),
child: Text(
'${names[index]} ',
style: const TextStyle(fontSize: 18),
textAlign: TextAlign.left,
),
),
],
),
);
},
),
)
],
),
),
// ),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 35.0,
width: double.maxFinite,
/*decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))
),*/
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
//IconButton(icon: Icon(Icons.chat), onPressed: (){ },),
InkWell(
onTap: () {
//Navigator.pushNamed(context, "YourRoute");
},
child: TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('..',
style: TextStyle(
color: Colors.white,
// backgroundColor: Colors.blue,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
backgroundColor: Colors.blue,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
),
],
),
),
),
);

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 bottom align Button in the popup?

How to bottom align button in the popup ?
here is my tried code, but its giving some space from bottom.
I have used listview to build up popup
onPressed: () {
// Navigator.of(context).pushNamed(homePageTag);
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: Form(
key: _formKey,
child: ListView(
shrinkWrap: true,//This tells items to be put in center
children: <Widget>[
FlatButton(
//padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
color: appGreenColor,
child: Text("UPDATE", style: TextStyle(color: Colors.white)),
onPressed: () {
},
),
],
),
),
);
});
},
Looking for this- https://ibb.co/19k2ty7
& getting this - https://ibb.co/h7KwXbn
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Rounde Alert Box",
home: Scaffold(
appBar: AppBar(
backgroundColor: myColor,
title: Text("Rounded Alert Box"),
),
body: RoundedAlertBox(),
),
);
}
}
class RoundedAlertBox extends StatefulWidget {
#override
_RoundedAlertBoxState createState() => _RoundedAlertBoxState();
}
class _RoundedAlertBoxState extends State<RoundedAlertBox> {
#override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: openAlertBox,
color: myColor,
child: Text(
"Open Alert Box",
style: TextStyle(color: Colors.white),
),
),
);
}
openAlertBox() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Rate",
style: TextStyle(fontSize: 24.0),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
],
),
],
),
SizedBox(
height: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
Padding(
padding: EdgeInsets.only(left: 30.0, right: 30.0),
child: TextField(
decoration: InputDecoration(
hintText: "Add Review",
border: InputBorder.none,
),
maxLines: 8,
),
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: myColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"Rate Product",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
});
}
}