Container inside Material widget taking full screen height in flutter - flutter

Question

I am trying to implement a card-like overlay whose height will be dependent on the child texts.
This is the code of my flutter card overlay which is taking full-screen height. How should I fix it without declaring a constant height as the amount of text is variable.
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_overlay_window/flutter_overlay_window.dart';
class TrueCallerOverlay extends StatefulWidget {
const TrueCallerOverlay({Key? key}) : super(key: key);
#override
State<TrueCallerOverlay> createState() => _TrueCallerOverlayState();
}
class _TrueCallerOverlayState extends State<TrueCallerOverlay> {
bool isGold = true;
final _goldColors = const [
Color.fromARGB(255, 51, 219, 79),
Color.fromARGB(255, 151, 235, 169),
Color.fromARGB(255, 15, 107, 35),
];
final _silverColors = const [
Color(0xFFAEB2B8),
Color(0xFFC7C9CB),
Color(0xFFD7D7D8),
Color(0xFF003226),
];
final bgColor = Color(0xFF003226);
final textColor = Colors.white;
#override
void initState() {
super.initState();
FlutterOverlayWindow.overlayListener.listen((event) {
log("$event");
setState(() {
isGold = !isGold;
});
});
}
#override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12.0),
width: double.infinity,
//height: double.infinity,
decoration: BoxDecoration(
color: bgColor,
// gradient: LinearGradient(
// begin: Alignment.topLeft,
// end: Alignment.bottomRight,
// colors: isGold ? _goldColors : _silverColors,
// ),
borderRadius: BorderRadius.circular(12.0),
),
child: GestureDetector(
onTap: () {
FlutterOverlayWindow.shareData(
"Heyy this is a data from the overlay");
},
child: Stack(
children: [
Center(
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 10),
child: Text(
"Attention",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 28,
color: textColor),
),
),
Container(
margin: EdgeInsets.only(top: 10),
child: Text(
"t1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 20,
color: textColor),
),
),
Container(
margin: EdgeInsets.only(top: 10),
child: Text(
"t2",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 20,
color: textColor),
),
),
Container(
alignment: Alignment.centerRight,
margin: EdgeInsets.all(25),
child: FlatButton(
child: Text(
'Reference',
style: TextStyle(fontSize: 20.0),
),
color: Colors.white,
textColor: Colors.black,
onPressed: () {},
),
),
],
),
),
Positioned(
top: 0,
right: 0,
child: IconButton(
onPressed: () async {
await FlutterOverlayWindow.closeOverlay();
},
icon: const Icon(
Icons.close,
color: Colors.white,
),
),
),
],
),
),
),
),
);
}
}
this is the current output What I am expecting

Answer 1

just wrap your Container with IntrinsicHeight or SingleChildScrollView.