Hello guys im new in flutter and i need help with my app, to put a button under an image in my app main menu,
here is my code so far i build based on https://docs.flutter.dev/development/ui/layout/tutorial
import 'package:flutter/material.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
void main() {
// debugPaintSizeEnabled = true;
runApp(const HomePage());
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Medicine Reminder App'),
),
body: Stack(
children: [
Image.asset(
'images/MenuImg.jpg',
width: 600,
height: 200,
fit: BoxFit.cover,
),
],
),
),
);
}
}
what i wanna do is put a button to navigate to a different page.
Here is a little illustration where i want to put my button
CodePudding user response:
Just change the Stack
with Column or Listiw
body: Column(
children: [
Image.asset(
'images/MenuImg.jpg',
width: 600,
height: 200,
fit: BoxFit.cover,
),
/// your button is here:
Row(
children:[
ElevetedButton(),// btn 1
ElevetedButton(),// btn 2
...
],
),
CodePudding user response:
you can wrap the image widget with a Column
, to set widgets ordered vertically, I did it for the Row to show the button with a MainAxisAlignment.spaceBetween
to space them
Give it a try this:
import 'package:flutter/material.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
void main() {
// debugPaintSizeEnabled = true;
runApp(const HomePage());
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Medicine Reminder App'),
),
body: Column(
children: [
Stack(
children: [
Image.asset(
'images/MenuImg.jpg',
width: 600,
height: 200,
fit: BoxFit.cover,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: Text('btn 1'),
onPressed: () {},
),
ElevatedButton(
child: Text('btn 2'),
onPressed: () {},
),
ElevatedButton(
child: Text('btn 3'),
onPressed: () {},
),
],
),
],
),
),
);
}
}
CodePudding user response:
You need to use the widget Column
in the body argument of your Scaffold
widget to have the possibility to add multiple widgets in a column view on your screen.
You can find a fully working example at this zaap.run link.
You can also find the code without any preview here:
import 'package:flutter/material.dart';
void main() {
// debugPaintSizeEnabled = true;
runApp(const HomePage());
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Medicine Reminder App'),
),
body: Column(children: [
Stack(
children: [
Image.network(
'https://i.imgur.com/9ZOaH1m.jpeg',
width: 600,
height: 200,
fit: BoxFit.cover,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.black)),
onPressed: () {},
child: Text("Button1"),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.black)),
onPressed: () {},
child: Text("Button2"),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.black)),
onPressed: () {},
child: Text("Button3"),
),
],
)
]),
),
);
}
}