CODEWITHSUNDEEP
flutterflutter-layout
Urvashi kharecha
Urvashi kharecha

Reputation: 859

set data inside row and column in flutter

enter image description here

i need to set data like this

i have tried taken row first then column then again row, but in row i am unable to set space between job id and 011.

Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Container(
                      margin: EdgeInsets.only(right: 10.0),
                      width: 50.0,
                      height: 50.0,
                      decoration: new BoxDecoration(
                          shape: BoxShape.circle,
                          image: new DecorationImage(
                            fit: BoxFit.fill,
                            image: AssetImage('assets/noimage.jpg'),
                          ))),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text('Job id',
                              style: TextStyle(
                                  color: Colors.grey.shade700,
                                  fontSize: 16.0,
                                  fontWeight: FontWeight.normal)),
                          Text('011',
                              style: TextStyle(
                                  color: Colors.grey.shade700,
                                  fontSize: 16.0,
                                  fontWeight: FontWeight.normal)),
                        ],
                      ),
],
                  ),
                ],
              ),

set space between job id and it's data but in my case it will jobid011 .

Upvotes: 0

Views: 408

Answers (3)

Aamil Silawat
Aamil Silawat

Reputation: 8229

You can use crossAxisAlignment: CrossAxisAlignment.start for space between Text Widget

 Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Text(heading,
              style: AppTheme.textStyleWith(15, Colors.black)
                  .copyWith(fontWeight: FontWeight.bold)),
        ),
        Expanded(
          child: Text(
            details,
            style: AppTheme.textStyleWith(15, Colors.black),
          ),
        )
      ],
    );

Upvotes: 0

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can use Spacer() Widget to make this work

    Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Container(
                      margin: EdgeInsets.only(right: 10.0),
                      width: 50.0,
                      height: 50.0,
                      decoration: new BoxDecoration(
                          shape: BoxShape.circle,
                          image: new DecorationImage(
                            fit: BoxFit.fill,
                            image: AssetImage('assets/noimage.jpg'),
                          ))),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.start,
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Text('Job id',
                              style: TextStyle(
                                  color: Colors.grey.shade700,
                                  fontSize: 16.0,
                                  fontWeight: FontWeight.normal)),
                           Spacer(),
                          Text('011',
                              style: TextStyle(
                                  color: Colors.grey.shade700,
                                  fontSize: 16.0,
                                  fontWeight: FontWeight.normal)),
                        ],
                      ),
],
                  ),
                ],
              ),

see more about this here

Upvotes: 0

Anil Chauhan
Anil Chauhan

Reputation: 707

Try like this : 

   Row( 
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(padding: EdgeInsets.only(left: 10.0),),
        Container(
          margin: EdgeInsets.only(right: 10.0),
          width: 50.0,
          height: 50.0,
          color: Colors.red
         ),
         Expanded(
          child:  Column(
          children: <Widget>[
             Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text('Job id',
                    style: TextStyle(
                    color: Colors.grey.shade700,
                    fontSize: 16.0,
                    fontWeight: FontWeight.normal)),
                  Text('011',
                    style: TextStyle(
                    color: Colors.grey.shade700,
                    fontSize: 16.0,
                    fontWeight: FontWeight.normal)),
                 ],
                )
              ],
             ),
            ),
            Padding(padding: EdgeInsets.only(right: 10.0),)

           ],
       ),

Upvotes: 1

Related Questions