Which widget can be used as a root widget (supports Text) in a new route without covering the entire screen in Flutter?

Question

I am creating a new page route PopupRoute and using a Stack as the root of the new popup page. It works fine until I add Text to its children. Text will have two yellow lines underneath. I tried Material(child:Stack()) and Scaffold(child:Stack()) . It can fix the yellow line issue, but it covers the entire screen and make the barrierDismissible not work.

Are there any other widgets can solve the Text yellow issues in my case?

Answer 1

There might be a cleaner solution, but the first thing I thought of is wrapping Material inside of Align widget.

eg

showDialog(context: context, barrierDismissible: true, builder: (context) {
  return Stack(alignment: Alignment.center, fit: StackFit.loose, children: <Widget>[

    Container(width: 100, height: 100, color: Colors.blue),
    Align(
      child: Material(
        type: MaterialType.transparency,
        child: Text("TEXT"),
      )
    ),

  ]);
});

Answer 2

You just need to wrap your Text widget inside a DefaultTextStyle widget. A DefaultTextStyle widget gets added implicitly by the Scaffold or Material widget.

DefaultTextStyle(
  style: TextStyle(),
  child: Text("This is a test"),
),