Привет, ребята, я новичок в флаттере, и мне нужна помощь с моим приложением, чтобы поместить кнопку под изображением в главном меню моего приложения,
вот мой код, который я строю на основе 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,
),
],
),
),
);
}
}
то, что я хочу сделать, это поставить кнопку для перехода на другую страницу.
Вот небольшая иллюстрация, где я хочу разместить свою кнопку
вы можете обернуть виджет изображения с помощью Column
, чтобы установить виджеты в вертикальном порядке, я сделал это для строки, чтобы показать кнопку с MainAxisAlignment.spaceBetween
для их разделения
Попробуйте это:
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: () {},
),
],
),
],
),
),
);
}
}
Вам нужно использовать виджет Column
в аргументе body вашего виджета Scaffold
, чтобы иметь возможность добавлять несколько виджетов в виде столбца на экране.
Вы можете найти полностью рабочий пример по этой ссылке zaap.run.
Вы также можете найти код без предварительного просмотра здесь:
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"),
),
],
)
]),
),
);
}
}
Привет, @NyK, вы можете использовать виджет SizedBox()
и свойство высоты, чтобы создать пространство между вашим виджетом Stack()
и кнопками Row()
внутри вашего Column()
Просто измените Stack
на Column или 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
...
],
),
Попробуйте следующий код:
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,
),
],
),
const SizedBox(height: 10.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: const Text('Button 1'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Scaffold(
body: body,
),
),
);
},
),
ElevatedButton(
child: const Text('Button 2'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Scaffold(
body: body,
),
),
);
},
),
ElevatedButton(
child: const Text('Button 3'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Scaffold(
body: body,
),
),
);
},
),
],
),
],
),
),
);
}
}
привет, сэр, я считаю, что ваш код хорошо подходит для моего приложения, но не могли бы вы сказать мне, как я могу переместить кнопку немного вниз? потому что, когда я запускаю его, кнопка находится очень близко к изображению. Спасибо