Вставить виджет за пределами виджета Диалог - Flutter

Question

У меня есть этот дизайн изображение , и я пытаюсь воспроизвести его на Flutter.

Мне уже удалось воспроизвести все, кроме текста под диалоговым окном. здесь Как мне вставить текст вне диалогового окна?

Мой диалог без текста внутри DialogBox.

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

Вы можете попробовать это, проще использовать только 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,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

Вы можете использовать Overlay с диалоговым окном, чтобы показать этот эффект

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