Overflow visible in Expanded widget

Question

My layout is a row with three expanded widgets.

I need overflow visible in one of the expanded widgets

This is the code

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red,)
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.green,)
    ),
    Expanded(
      flex: 3,
      child: Container(color: Colors.orange,)
    ),
  ],
),

Now I need to add circles like this, in of the Expanded widgets, that overflow the Expanded widget. I can't wrap the Expanded in an overflow box, so I am lost

Any help is appreciated.

Edit: I tried this with the third expanded, just to see if it will overflow, but it only overflows the SizedOverflowBox, no overflow over the Expanded

Expanded(
  flex: 3,
  child: SizedOverflowBox(
    size: const Size(100.0, 100.0),
    alignment: AlignmentDirectional.bottomCenter,
    child: Container(height: 50.0, width: 1500.0, color: Colors.blue,),
  ),
),

It looks like it is not going to be possible

Answer 1

Can easily be achieved with a Stack. Please see the code below :

import 'package:flutter/material.dart';

final 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(
      children: [
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  color: Colors.red,
                )),
            Expanded(
                flex: 2,
                child: Container(
                  color: Colors.green,
                )),
            Expanded(
                flex: 3,
                child: Container(
                  color: Colors.orange,
                )),
          ],
        ),
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 25,
                width: 25,
                decoration:
                    BoxDecoration(color: Colors.black, shape: BoxShape.circle),
                child: Center(
                  child: Container(
                    height: 15,
                    width: 15,
                    decoration: BoxDecoration(
                        color: Colors.white, shape: BoxShape.circle),
                  ),
                ),
              ),
              Container(
                height: 25,
                width: 25,
                decoration:
                    BoxDecoration(color: Colors.black, shape: BoxShape.circle),
                child: Center(
                  child: Container(
                    height: 15,
                    width: 15,
                    decoration: BoxDecoration(
                        color: Colors.white, shape: BoxShape.circle),
                  ),
                ),
              ),
              Container(
                height: 25,
                width: 25,
                decoration:
                    BoxDecoration(color: Colors.black, shape: BoxShape.circle),
                child: Center(
                  child: Container(
                    height: 15,
                    width: 15,
                    decoration: BoxDecoration(
                        color: Colors.white, shape: BoxShape.circle),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Please see the code for Text Bullet points overflowing.

import 'package:flutter/material.dart';

final 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(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red.withAlpha(60),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 400,
              child: SizedBox(
                width: 300,
                child: Text(
                  'HelloHello 🅐',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.green.withAlpha(60),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 400,
              child: SizedBox(
                width: 300,
                child: Container(
                  child: Text(
                    '\n\nHelloHello HelloHello 🅐\n\nHelloHello HelloHello 🅐\n\nHelloHello HelloHello 🅐\n\nHelloHello HelloHello 🅐',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            color: Colors.purple.withAlpha(60),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 400,
              child: SizedBox(
                width: 300,
                child: Text(
                  '\n\n\n\n\n\n\n\n\n\n\n\Hello Hello Hello Hello Hello Hello ',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}