Learned about flutter Concept Containers,rows and columns

rajamohan

Here I learned about the Container concept in both Stateful and Stateless Widgets,

we initialize a class that is extending to a related Stateful/Stateless widget parent class

then we return a Container that has only a single child, but for that, we can initialize a row/column that can have multiple children inside it. for those Multiple children, we can implement another child like text fields/Images/Icons/Cards, etc. It is one of the useful concepts to make user-friendly widgets.

 class _SplashScreenState extends State<SplashScreen> {  
@override
  Widget build(BuildContext context) {

        return Container( //starting the container
          child: Column(children: [ //only a single child, for that we took column here and now we can have multiple children
            SizedBox(
              width: 350,
              height: 700,
              child: Card( //for the first child I took a card
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)
                ),
                child: Column(  //for another children I initialised another coulumn
/*we can have many nested conditions in children's child  */
                  mainAxisAlignment: MainAxisAlignment.start,
                  children:<Widget> [
//now in the coulmns children i took a container each and in that I took textFields with some border
                    Container( 
                    margin: EdgeInsets.only(top: 10.0,bottom: 20.0),
                      child: Text("Rate Your Experience",style: TextStyle(fontStyle: FontStyle.normal,fontSize: 25.0),textAlign: TextAlign.start,),
                    ),
                   Container(
                     margin: EdgeInsets.only(bottom: 20.0),
                     child: Text("Are you Satisfied with service?",textAlign: TextAlign.start),
                   ),
//here I Added icons so that it looks bit clean
                    Container(
                      margin: EdgeInsets.only(bottom: 20.0),
                      child: Row(mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.star),
                          Icon(Icons.star),
                          Icon(Icons.star),
                          Icon(Icons.star),
                          Icon(Icons.star),
                        ],
                      ),
                    ),
                    const Divider(
                      thickness: 1,
                    ),
                    const Text("Tell us What to Improve?",style: TextStyle(fontSize: 20.0),textAlign: TextAlign.start),
                    Container(
                      margin:EdgeInsets.only(top: 20.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,

                        children: [
                         Container(
                             decoration: BoxDecoration(border: Border.all(width: 2.0,color: Colors.black)),
                           child: Center(
                             child: Text("Overall Service"),
                           ),
                         ),
                          SizedBox(
                          child: Container(
                            decoration: BoxDecoration(border: Border.all(width: 2.0,color: Colors.black)),
                            child: Center(
                              child: Text("Customer Support"),
                            ),
                          ),)
                        ],
                      ),
                    ),
                    Container(
                      margin:EdgeInsets.only(top: 10.0),
                      child: ElevatedButton(
                        onPressed:(){
                           Navigator.of(context).push( // here the container has a button inside it which in then pressed goes to next screen
                             MaterialPageRoute( //the routing part
                               builder: (context) => OtherScreen(),
                             ),
                           );
                        },
                        child: Text("Submit"),
                      )
                    )
                  ],

                ),
              ),
            )
          ]),
        );

  }
}