Как разместить кнопку под изображением? Флаттер

Привет, ребята, я новичок в флаттере, и мне нужна помощь с моим приложением, чтобы поместить кнопку под изображением в главном меню моего приложения,

Вот мой код, который я строю на основе 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,
            ),
          ],
        ),
      ),
    );
  }
}

То, что я хочу сделать, это поставить кнопку для перехода на другую страницу.

Вот небольшая иллюстрация, где я хочу разместить свою кнопку

Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу
Увеличение подматриц на единицу - LeetCode
Переключение светлых/темных тем
Переключение светлых/темных тем
В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно...
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой...
В PHP
В PHP
В большой кодовой базе с множеством различных компонентов классы, функции и константы могут иметь одинаковые имена. Это может привести к путанице и...
Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel
Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку...
1
0
69
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете обернуть виджет изображения с помощью 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 21.11.2022 14:10

Привет, @NyK, вы можете использовать виджет SizedBox() и свойство высоты, чтобы создать пространство между вашим виджетом Stack() и кнопками Row() внутри вашего Column()

BLKKKBVSIK 21.11.2022 14:20

Просто измените 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,
                        ),
                      ),
                    );
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Другие вопросы по теме