Raising Image flutter in card

Question

i'm new to flutter and i wanted to create simple design for menu app as shown in image below ... i tried below code but it didn't give same design, is there any way to achieve it?

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text("Card over stack"),
    ),
    body: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.topCenter,
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                color: Colors.lightBlueAccent),
            height: 100,
          ),
        ),
        Positioned(
          top: 60,
          right: 10,
          left: 10,
          child: Card(
            child: ListTile(
                leading: SizedBox(
                    height: 150.0,
                    width: 150.0, // fixed width and height
                    child: Image.asset("assets/images/test.png"))),
          ),
        ),
      ],
    ),
  ),

Answer 1

It appears you're attempting to create a menu app design using Flutter, and you're facing issues achieving the desired layout. The code you've provided seems to create a basic layout with a stack containing a colored container at the top and a card below it, displaying an image.

To create a design similar to the one you've described, you might need to adjust the layout and styling. Here's an example of how you could modify your code to achieve a design closer to your description

  import 'package:flutter/material.dart';

    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Menu App Design"),
            ),
            body: Stack(
              children: [
                Container(
                  color: Colors.lightBlueAccent,
                  height: MediaQuery.of(context).size.height * 0.3, // Adjust the height of the colored container
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.2, // Adjust the positioning of the card
                  right: 10,
                  left: 10,
                  child: Card(
                    elevation: 5,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: ListTile(
                      leading: SizedBox(
                        height: 100.0, // Adjust the height of the image container
                        width: 100.0, // Adjust the width of the image container
                        child: Image.asset("assets/images/test.png"),
                      ),
                      title: Text('Menu Item'),
                      subtitle: Text('Description of the menu item'),
                      // Add other content for your menu item as needed
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }