Overflow visible in Expanded widget - flutter

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