Show the user details in to equal parts to the screen-CodePudding

I'm passing my user data to the next screen and i want to show the data into equal screen, I tried different methods but an able to find the solution. Container( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,

       children: [ Row(
           
            children: [

              commonTitle(context, "Username : ", 20, Colors.black),
              Text('${username}', textAlign: TextAlign.left, style:

TextStyle(fontSize:20),),]),

              Row(
                children:[

              Text("Email : ",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold)),
              Text('${email}',style: TextStyle(fontSize:20),),]),

              Row(
                  children:[

              commonTitle(context, "Contact : ", 20, Colors.black),
              Text('${contact}',style: TextStyle(fontSize:20),),]),

              Row(
                  children:[


              commonTitle(context, "D.O.B : ", 20, Colors.black),
              Text('${dateController}',style: TextStyle(fontSize:20),),]),

              Row(
                  children:[

              commonTitle(context, "Department : ", 20, Colors.black),
              Text('${selectedValue}',style: TextStyle(fontSize:20),),]),

    Row(
        children:[
                commonTitle(context, "Hobbie : ", 20, Colors.black),
                Text('${selectedHobbies.join(",")}',style: TextStyle(fontSize:20),),]),

    Row(
        children:[

                commonTitle(context, "Age : ", 20, Colors.black),
                Text('${range.start.toInt()}-${range.end.toInt()}',style: TextStyle(fontSize:20),),]),
    Row(
        children:[


                commonTitle(context, "Gender : ", 20, Colors.black),
                Text('${selectedGender}',style: TextStyle(fontSize:20),),]),

    Row(
        children:[


                commonTitle(context, "Address : ", 20, Colors.black),
                Container(
                  width: MediaQuery.of(context).size.width/2,
                  child: Text('${add}',style: TextStyle(fontSize:20)),
                ),]),






     ]),
    )[here is the image of my output ][1]

CodePudding user response：

USE THIS FORMAT INSIDE YOUR NEW PAGE Scaffold

 Padding(
      padding: const EdgeInsets.all(8.0),
      child:   Container(
        height: MediaQuery.of(context).size.height, //height of 
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Your Text'),  
            Text('Your Text'),
            Text('Your Text'),
          ],
        ),
      ),
    ),

CodePudding user response：

Your image is not showing up. I assume you can achieve equal parts by wrapping your widgets in Flex and specifying what portion of the container they have to occupy. But if you add an executable snippet or a demo of what you want to achieve, I work on it and edit this answer by adding code.