我如何將列表視圖放在帶有按鈕的框 decroation 下？

Question

我在 flutter 還是新手，我想在我的應用程序中制作一個帶有按鈕和列表視圖的主頁。 所以這是我已經設計好的預期主頁

預期的設計

正如你們所看到的，我想在主頁的按鈕部分有一個列表視圖，在上半部分的圖像前面有一個帶有按鈕的框裝飾。

但到目前為止我的主頁看起來像這樣

到目前為止的實際主頁

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

import 'package:flutter/material.dart';
import 'package:get/get.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(
        backgroundColor: context.theme.backgroundColor,
        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: 15.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\n", style: normalStyle,)
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/news.png'),
                      iconSize: 50,
                      onPressed: () {
                         Navigator.of(context, rootNavigator: true).push(
                          MaterialPageRoute(builder: (context) => const NewsHomePage()),
                        );
                      },
                    ),
                    Text("  News \n& Article", style: normalStyle)
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/recipe.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    Text("Healty Food \n     Recipe", style: normalStyle)
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

任何幫助對我來說意義重大，謝謝你們

Answer 1

請閱讀有關 Container 的 boxDecoration 和 ListView 小部件的更多信息

ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: 5,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black),
                      borderRadius: BorderRadius.circular(20)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: Container(
                            height: 50,
                            width: 50,
                            decoration: BoxDecoration(boxShadow: [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.5),
                                spreadRadius: 1,
                                blurRadius: 1,
                                // offset: Offset(0,
                                //     1), // changes position of shadow
                              ),
                            ], color: Colors.white),
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [Text('Title'), Text('SubTitle')],
                        )
                      ],
                    ),
                  ),
                ),
              );
            },
          )

OUTPUT：