Stack but one of the elements should use Expanded () [closed] - flutter

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am creating a container that should take up all available Space in width thats possible. However, I need to position an element on it that clips out of it, so I am using a Stack for it.
Using an Expanded on the lower stacked element causes an exception and also using a stack just with the positioned Item also causes an exception because the stacked widget has nowhere to anchor to.
Any Ideas how to solve this?
double.maxFinite as width does not work either
Using an expanded around the Containers looks like this:
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Stack(
overflow: Overflow.visible,
children: [
Container(
height: 100,
width: 100,
padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(10), // Padding for content to Container Border
child: Text("Fruit"),
),
),
Positioned(
top: -8,
left: 10,
child: Container(
//padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(5), // Padding for content to Container Border
child: Text("Fruit"),
),
),
),
],
),
Stack(
overflow: Overflow.visible,
children: [
Expanded(
child: Container(
height: 100,
//width: MediaQuery.of(context).size.width/2,
padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(10), // Padding for content to Container Border
child: Text("Fruit"),
),
),
),
Positioned(
top: -8,
left: 10,
child: Container(
//padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(5), // Padding for content to Container Border
child: Text("Fruit"),
),
),
),
],
),
],
);

Answer 1

Try fit: StackFit.expand,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Container(
height: 100,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: _card()),
Expanded(child: _card()),
],
),
);
}
Widget _card() {
return Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
padding: EdgeInsets.all(10),
child: Text("Fruit"),
),
),
Positioned(
top: -8,
left: 10,
child: Container(
//padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
padding: EdgeInsets.all(5),
child: Text("Fruit"),
),
),
),
],
);
}
}