材料部件内的容器在抖动中占据全屏高度

Question

我正在尝试实现一个类似卡片的覆盖，其高度将取决于子文本。这是我的颤振卡覆盖的代码，它占据了全屏高度。我应该如何修复它没有声明一个恒定的高度作为文本的数量是可变的。

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

这是当前的输出

Answer 1

用IntrinsicHeight或SingleChildScrollView包装您的Container。