I am trying to implement this kind of UI. But i can't find a way to place image outside the container.(Check the image )

CodePudding user response：

Hey you can use Stack widget to overlap from card, use Positioned to align your widget at particular position.

For - Eg.

             Stack(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
                    child: Card(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(
                              width: MediaQuery.of(context).size.width*0.6,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children:const [
                                  Text("Title Text "),
                                  Text("Body text"),
                                ],
                              ),
                            ),
                            const Spacer(),
                          ],
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    left: MediaQuery.of(context).size.width*0.65,
                    top: -10,
                    bottom: 15,
                    child: Image.asset("assets/sample.png", fit:BoxFit.fill,), // replace your image with Image.assets here
                  ),
                  Positioned(
                    right: 20,
                    top: 0,
                    bottom: 0,
                    child: IconButton(onPressed: (){}, icon:  const Icon(Icons.add_circle),),
                  ),
                ],
              )

For more details about

CodePudding user response：

You can use Stack widget first put Image widget inside it and then Container widget

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: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
       alignment : Alignment.center, 
      children :[
            Image.network('https://image.shutterstock.com/image-vector/sample-stamp-rubber-style-red-260nw-1811246308.jpg'),
            Container( child :const Text('test',style : TextStyle(color: Colors.black ,fontSize: 20.00))),
           
           
      ],
    );
  }
}