CODEWITHSUNDEEP
flutterdart
Prianca
Prianca

Reputation: 1165

How to add a label below images in a row in flutter and to add a card in flutter

This is my code and here I just want to know how to add text below the images. Just let me know, please?

child: Column(
      children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          child: Image.asset('assets/cat.jpg',
          ),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
      ],
    ),

Upvotes: 1

Views: 14509

Answers (4)

NDM
NDM

Reputation: 944

You just need to wrap the image in a Column/Stack 

child: Column(
        children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              child: Column(children: <Widget>[
                Image.asset('assets/cat.jpg'),
                Text('Some text')
              ],)
            ),
            Expanded(
              child: Column(children: <Widget>[
                Image.asset('assets/cat.jpg'),
                Text('Some text')
              ],)
            ),
            Expanded(
              child: Column(children: <Widget>[
                Image.asset('assets/cat.jpg'),
                Text('Some text')
              ],)
            ),
          ],
        ),

Upvotes: 0

user11029823
user11029823

Reputation: 

Card(
        elevation: 5,
        child: Column(
          children: <Widget>[
            Expanded(
              child: Image.asset('assets/img.jpg'),
            ),
            Text('My Image'),
          ],
        ),
      ),

You can put this code row or as you want. You can also put some padding to arrange the text image. If you want constant height and weight put this into a Container Widget and specify the height and weight. Thanks.

Upvotes: 3

Vicky Salunkhe
Vicky Salunkhe

Reputation: 10985

If you want to add a line of text below the images at once 

Column(
      children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          child: Image.asset('assets/cat.jpg',
          ),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
      ],
    ),
   Text("Your text here"),
]), // column widget ends here

If you want to add text below each image then change your Expanded widget with this.

Expanded(
   child: Column(
       children : <Widget>[
         Image.asset('assets/cat.jpg'),
         Text("your text here")
       ] 
   )
),

else create a function to return a widget as it seems you have plenty of widgets of that kind

Widget getWidget(imagePath, text){
   return Expanded(
      child: Column(
          children : <Widget>[
            Image.asset(imagePath),
            Text(text)
          ] 
       )
     )
}

and then use this

Column(
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        getWidget('assets/cat.jpg','your text here'),
        getWidget('assets/cat.jpg','your text here'),
        getWidget('assets/cat.jpg','your text here'),
      ],
    ),
]),

Upvotes: 0

Sami Kanafani
Sami Kanafani

Reputation: 15739

child: Column(children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Expanded(
                child: Column(
                  children: <Widget>[
                    Image.asset(
                      'assets/cat.jpg',
                    ),
                    Text('cat')
                  ],
                ),
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    Image.asset('assets/cat.jpg'),
                    Text('cat')
                  ],

                ),
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    Image.asset('assets/cat.jpg'),
                    Text('cat')
                  ],
                ),
              ),
            ],
          )
        ]);
      },
    )

Upvotes: 1

Related Questions