我如何将列表视图放在带有按钮的框 decroation 下？

Question

iam still new in flutter and i wanted to make a homepage with a button and a listview in my app. so here is my expected homepage that i already designed

expected design

as you guys can see i wanted to have a listvew in the button half of my homepage, and a boxdecoration with buttons infront of an image in the top half.

but so far my homepage looks like this

actual homepage so far

here is my code for the homepage so far

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)
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

any help would mean so much to me, thank you guys

Answer 1

Please read more about Container's boxDecoration and ListView widgets

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: