flutter - 在小部件对话框外插入小部件 - Flutter

Question

我有这个设计 图像，我正在尝试在 Flutter 上重现它。

我已经设法重现对话框下方的所有内容，而不是文本。此处 如何在对话框外插入文本？

我的 DialogBox 内没有文本的 Dialog。

Dialog(
 insetPadding: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0, bottom: 170),
 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
 elevation: 0,
 child: Align(
  alignment: Alignment.topCenter,
  child: Container(
   padding: EdgeInsets.symmetric(horizontal: 18, vertical: 16),
   width: 340,
   decoration: BoxDecoration(
    color: ThemeColor.white,
    borderRadius: BorderRadius.circular(10)
   ),
  ),
 ),
)

标签： flutter

Answer 1

你可以试试这个，只用溢出盒更简单

class OverflowDialogBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.white,
      insetPadding:
          EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0, bottom: 170),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      elevation: 0,
      child: Align(
        alignment: Alignment.topCenter,
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 18, vertical: 16),
          width: 340,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
          ),
          child: Stack(
            children: [
              Text("text\n\n\n\ntext\n\n\n\n"),
              Align(
                alignment: Alignment.bottomCenter,
                child: SizedBox(
                  width: 1.0,
                  height: 1.0,
                  child: OverflowBox(
                    minWidth: 0.0,
                    maxWidth: 1000.0,
                    minHeight: 0.0,
                    maxHeight: 250.0,
                    child: Container(
                      child: Align(
                        alignment: Alignment.bottomCenter,
                        child: SizedBox(
                          width: 1.0,
                          height: 1.0,
                          child: OverflowBox(
                            minWidth: 0.0,
                            maxWidth: 1000.0,
                            minHeight: 0.0,
                            maxHeight: 80.0,
                            child: Container(
                              color: Colors.black38,
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text(
                                  "Recurring Billing, Cancel Anytime",
                                  style: TextStyle(
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}