我如何在 flutter 中的圖像前面堆放盒子裝飾？

Question

大家好，我是 flutter 的新人，我想有一個主頁和圖像作為 boxfit.cover 和一個盒子裝飾，就在它前面用於我的按鈕。 這是我的主頁設計 HomePage Design

正如你們所看到的，我想要一個堆滿圖像的正方形，到目前為止我的主頁只有圖像下方的按鈕

像這樣

到目前為止，這是我主頁的代碼

import 'package:flutter/material.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'package:medreminder/NewsArticle/news_home.dart';
import 'package:medreminder/Reminder/ui/theme.dart';
import 'Reminder/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
import 'package:medreminder/main.dart';
import 'package:medreminder/home_page.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(
          backgroundColor: Color(0XFF0080FE),
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  'images/MenuImg.jpg',
                  width: 600,
                  height: 170,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/reminder.png'),
                      iconSize: 50,
                      onPressed: () {
                        Navigator.of(context, rootNavigator: true).push(
                          MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                        );
                      },
                    ),
                    Text("Reminder")
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/news.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    Text("  News \n& Article")
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/recipe.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    Text("Healty Food \n     Recipe")
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

任何答案都會對我有很大幫助，謝謝你們

Answer 1

如果您想將任何小部件與另一個小部件重疊，您應該使用 Stack 小部件。 對於 position 小部件，我們使用對齊和填充小部件。 如果您想了解有關 Stack 小部件的更多信息，請訪問官方 flutter 站點：- https://api.flutter.dev/flutter/widgets/Stack-class.html 。

運行以下代碼以獲得更好的理解。 我使用了我的本地圖像，因此它們會給您的系統帶來錯誤。 用你的替換我的圖像資源。

完整代碼：-

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StackWidget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const StackWidget(),
    );
  }
}

class StackWidget extends StatefulWidget {
  const StackWidget({Key? key}) : super(key: key);
  @override
  _StackWidgetState createState() => _StackWidgetState();
}

class _StackWidgetState extends State<StackWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Medical Reminder App"),
          backgroundColor: Colors.blue,
        ),
        body: Stack(
          alignment: Alignment.topCenter,
          children: [
            Image.asset('assets/firstImage.png'),
            Container(
              height: 250,
              width: 400,
              margin: const EdgeInsets.only(top: 250),
              padding: const EdgeInsets.only(
                left: 2,
                right: 2,
                top: 15,
                bottom: 15,
              ),
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(35.0)),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    spreadRadius: 2,
                    blurRadius: 7,
                    offset: const Offset(0, 8),
                  ),
                ],
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Column(
                        children: [
                          SizedBox(
                            height: 70,
                            width: 130,
                            child: Image.asset(
                              'assets/clock.png',
                              fit: BoxFit.cover,
                            ),
                          ),
                          const Text('Reminder')
                        ],
                      ),
                      Column(
                        children: [
                          SizedBox(
                            height: 70,
                            width: 130,
                            child: Image.asset(
                              'assets/clock.png',
                              fit: BoxFit.cover,
                            ),
                          ),
                          const Text('News & Article')
                        ],
                      ),
                      Column(
                        children: [
                          SizedBox(
                            height: 70,
                            width: 130,
                            child: Image.asset(
                              'assets/clock.png',
                              fit: BoxFit.cover,
                            ),
                          ),
                          const Text('Tips & Tricks')
                        ],
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Column(
                        children: [
                          SizedBox(
                            height: 70,
                            width: 130,
                            child: Image.asset(
                              'assets/clock.png',
                              fit: BoxFit.cover,
                            ),
                          ),
                          const Text('Food & Recipe')
                        ],
                      ),
                      Column(
                        children: [
                          SizedBox(
                            height: 70,
                            width: 130,
                            child: Image.asset(
                              'assets/clock.png',
                              fit: BoxFit.cover,
                            ),
                          ),
                          const Text('About Us')
                        ],
                      ),
                    ],
                  )
                ],
              ),
            ),
            Container(
              height: 180,
              width: 400,
              margin: const EdgeInsets.only(top: 600),
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(25.0)),
                  color: Colors.white,
                  border: Border.all(color: Colors.black, width: 2)),
              child: Column(
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 150,
                        width: 150,
                        decoration: BoxDecoration(
                          borderRadius:
                              const BorderRadius.all(Radius.circular(25.0)),
                          color: Colors.white,
                          border: Border.all(color: Colors.black, width: 2),
                        ),
                      ),
                      const SizedBox(width: 15),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: const [
                          Text(
                            'Subtitle',
                            style: TextStyle(
                                fontSize: 30, fontWeight: FontWeight.w600),
                          ),
                          Text('Title',
                              style: TextStyle(
                                  fontSize: 25, fontWeight: FontWeight.w500))
                        ],
                      )
                    ],
                  ),
                ],
              ),
            )
          ],
        ));
  }
}

Output：-

Answer 2

要將任何小部件重疊在另一個小部件上，應使用堆棧小部件。

關於Stack 和 IndexedStack的好文章 Flutter https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.white,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Column(
          children: [
            Container(
              padding: const EdgeInsets.all(10),
              width: double.infinity,
              color: Colors.blue,
              child: const Text(
                'Medicine Reminder App',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                ),
              ),
            ),
            Image.network(
              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-spPYVjXiO8kJSckeBiuUpnh01a6C-sc_Gw&usqp=CAU',
              width: double.infinity,
              height: 170,
              fit: BoxFit.cover,
            ),
            const SizedBox(height: 10),
            Expanded(
              child: Container(
                color: Colors.white,
              ),
            ),
          ],
        ),
        Positioned(
          top: 180,
          left: 150,
          child: Container(
            padding: const EdgeInsets.all(10),
            height: 200,
            width: 400,
            decoration: const BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(
                Radius.circular(
                  20,
                ),
              ),
            ),
            child: Wrap(
              runSpacing: 20,
              spacing: 40,
              children: const [
                IconTile(
                  icon: Icons.account_circle_rounded,
                  title: 'Person',
                ),
                IconTile(
                  icon: Icons.new_releases_sharp,
                  title: 'Sharp circle',
                ),
                IconTile(
                  icon: Icons.lightbulb,
                  title: 'lightbulb',
                ),
                IconTile(
                  icon: Icons.book_rounded,
                  title: 'Book Round',
                ),
                IconTile(
                  icon: Icons.question_mark,
                  title: 'question mark',
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

class IconTile extends StatelessWidget {
  const IconTile({required this.icon, required this.title});

  final IconData icon;
  final String title;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IconButton(
            onPressed: () {},
            icon: Icon(
              icon,
              size: 50,
            )),
        const SizedBox(height: 20),
        Text(
          title,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}