Question

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

我已经设法重现除对话框下面的文字以外的所有内容。 here 如何在“外部文本”对话框中插入？

“我的对话框”对话框中没有文本。

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)
   ),
  ),
 ),
)

Answer 1

您可以在对话框中使用“覆盖”来显示效果

const String title = 'Recurring Billing, cancel anytime. \n';
const String paragraph = '''By Tapping Continue, your payment will be charged to your Google Play account, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
''';

class Home extends StatefulWidget {
   @override
   _HomeState createState() => _HomeState();
}


class _HomeState extends State<Home> {

  OverlayEntry _overlayEntry; // The Overlay

  OverlayEntry _createOverlayEntry() {
    //Overlay is a Stack, so you can use Positiioned or Align,
    //play with the values to position the best you can the text
    return OverlayEntry(
      builder: (context) => Positioned(
        top: MediaQuery.of(context).size.height * 0.8,
        left: MediaQuery.of(context).size.width * 0.1,
        width: MediaQuery.of(context).size.width * 0.8,
        child: RichText(
          textAlign: TextAlign.center,
          textWidthBasis: TextWidthBasis.parent,
            text: TextSpan(
              style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
              text: title,
              children: [
                TextSpan(
                  style: TextStyle(fontSize: 12),
                  text: paragraph
                )
              ]
            ),
          )
      )
    );
  }

@override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('Tap'),
      onPressed: () async{
        _overlayEntry = _createOverlayEntry(); //create the Overlay
        Overlay.of(context).insert(_overlayEntry); //The overlay state
        //await for the future Dialog to end, basically until pop
        await showDialog(
         context: context,
         builder: (context) {
           return 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: Colors.white,
                    borderRadius: BorderRadius.circular(10)
                  ),
                ),
              ),
            );
          }
        );
        _overlayEntry.remove(); //remove the overlay after the dialog pop
      }
    );
  }
}

Answer 2

您可以尝试一下，仅使用Overflow Box



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

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

2 个答案: