How do i pile a boxdecoration infront of an image in flutter?

NyK
December 26, 2022
150 views
1 vote
2 Answers

Hello guys im new in flutter, and wanted to have a homepage with and image as a boxfit.cover and a box decoration right in front of it for my buttons. here is my design for the homepage
HomePage Design

as you guys can see i wanted a square that piled up with an image, so far my homepage only have buttons under an image

like this

here is the code for my homepage so far

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

any answers would helped me alot, thankyou guys

Answers

You should use the Stack widget if you want to overlap any widget with another. To position the widget, we use the Align and Padding widget. If you want more information about the Stack widget, visit the official flutter site : – https://api.flutter.dev/flutter/widgets/Stack-class.html.

Run the following code to get a better understanding. I have used my local images hence they would give you an error on your system. Replace my image assets with yours.

Full Code : –

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 : –

To overlap any widget on one-another one should use a stack widget.

Nice article on Stack and IndexedStack in 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,
        ),
      ],
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.