CODEWITHSUNDEEP
flutterdart
user10583336
user10583336

Reputation: 457

Positioning a widget on another widget flutter

Positioning the widget like the image below: (green over the red.)

Here is the representation

Upvotes: 3

Views: 3451

Answers (1)

drogel
drogel

Reputation: 2717

You can use a Stack with an overflow property of Overflow.visible and an alignment of Alignemnt.center, together with a Positioned widget with negative bottom value to achieve what you want. Here is a snippet I wrote for you, I tried to imitate the image you shared. You can run it on DartPad if you need to manipulate the parameters or explore further.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          overflow: Overflow.visible,
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              height: 150,
              width: 300,
              color: Colors.red
            ),
            Positioned(
              bottom: -50,
              child: Container(
                height: 100,
                width: 150,
                color: Colors.green
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Here is what it looks like:

Result

Upvotes: 6

Related Questions