Home > Back-end >  How to add text under images like shown in example below [Flutter]
How to add text under images like shown in example below [Flutter]

Time:07-05

I would like to add the text "Appointments" like shown in the example below. I've tried using the Text widget under Image.asset but I don't think I'm using it right. I'm still new to Flutter so any help would be much appreciated.

Expected Output

This is the code I have so far:

            Container(
              height: 250,
              width: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                boxShadow: kElevationToShadow[1],
                color: Color.fromARGB(255, 255, 255, 255),
              ),
              child: Align(
                alignment: Alignment(0, -0.5),
                child: Image.asset("assets/appointment.png", height: 150, width: 150),
              ), 
            ),

CodePudding user response:

Used card and column widget for this type of UI.

Card(
  elevation: 10,
  shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)),
  child: Column(
    children: [
      // Your Image Widget
      // Your Text Widget
    ],
  ),
),

CodePudding user response:

Use below code :

 Container(
              height: 250,
              width: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                boxShadow: kElevationToShadow[1],
                color: Color.fromARGB(255, 255, 255, 255),
              ),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment(0, -0.5),
                    child: Image.asset("assets/appointment.png", height: 150, width: 150),
                  ),
                  SizedBox(height: 20,),
                  Text('Appointments',style: TextStyle(color: Colors.black,fontSize: 18),),
                ],
              ),
            ),
  • Related