Search code examples
flutterflutter-layoutflutter-dependencies

Flutter. add Text below Container


This is a simple URL Browser launcher. I want to add text below the container.

Do I use a Stack or Children?

Any solutions will be grateful.

Thank you

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
        appBar: AppBar(
        title: Text("Welcome"),
         centerTitle: true,
         backgroundColor: Colors.black,
         ),      
      body: Container(      
       padding: EdgeInsets.all(20),
            child: Container( 
            height:200, 
            width:double.infinity,
            color: Colors.black,
               child: Center( 
               child: ElevatedButton( 
                  child: Text("Click Here"),
                  onPressed: () async {
                    String url = "https://www.google.com/";
                    // ignore: deprecated_member_use
                    var urllaunchable = await canLaunch(url); //canLaunch is from url_launcher package
                    if(urllaunchable){
                        // ignore: deprecated_member_use
                        await launch(url); //launch is from url_launcher package to launch URL
                    }else{
                       print("URL can't be launched.");
                     }
                  },
               )
            ),
         )
      ) 
    );
  }
}

ImageScreen


Solution

  • Just wrap it inside Column, like this:

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("Welcome"),
              centerTitle: true,
              backgroundColor: Colors.black,
            ),
            body: Column(
              children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child: Container(
                      height:200,
                      width:double.infinity,
                      color: Colors.black,
                      child: Center(
                          child: ElevatedButton(
                            child: Text("Click Here"),
                            onPressed: () async {
                            },
                          )
                      ),
                    )
                ),
                SizedBox(height: 50,),
                Text("Your Text")
              ],
            )
        );
      }