How to add text in a section of a container in flutter?

user_13977777 0
Viewed 1275

The result I want to have

expected

My current result

current result

I was trying to add a title section for my categories but the result was not what I expected. I'm looking to add a title section below each illustration in my categories.

child: Container(
   height: 400.0,
   width: 500.0,
   padding: const EdgeInsets.all(10.0),
   decoration: BoxDecoration(
   color: ColorPallete.secondColor[50],
   borderRadius: BorderRadius.circular(20.0),
   ),
   child: SvgPicture.asset(
     'assets/images/svg/megacategory/art__grocery.svg',
   ),
)
flutter-layout flutter
5 Answers

You can use a Column widget to align its contents vertically, in your example you can use it as follow (I have used some online images and colors you can edit it as per your requirement)-

    Column(
      children: [
        SizedBox(height: 50.0),
        Container(
          height: 100.0,
          width: 100.0,
          padding: const EdgeInsets.all(10.0),
          decoration: BoxDecoration(
            color: Colors.orange[50],
            borderRadius: BorderRadius.circular(20.0),
          ),
          child: Image.network(
            'https://img.icons8.com/cotton/online-shop-2--v2.png',
          ),
        ),
        SizedBox(height: 10.0),
        Text("Title Here")
      ],
    ),

It will arrange the contents as follows -

enter image description here

You can read more about Column widget here

user_53878800 
child: Container(
   height: 400.0,
   width: 500.0,
   padding: const EdgeInsets.all(10.0),
   decoration: BoxDecoration(
   color: ColorPallete.secondColor[50],
   borderRadius: BorderRadius.circular(20.0),
   ),
   child: Column(
     children: [
        SvgPicture.asset(
         'assets/images/svg/megacategory/art__grocery.svg',
        ),
        Text('Abarrotes')
)
user_36491030

You can wrap it with Column widget so you can add a Text widget under your container.

child: Column(
 children: [ 
  Container(
   height: 400.0,
   width: 500.0,
   padding: const EdgeInsets.all(10.0),
   decoration: BoxDecoration(
   color: ColorPallete.secondColor[50],
   borderRadius: BorderRadius.circular(20.0),
   ),
   child: SvgPicture.asset(
     'assets/images/svg/megacategory/art__grocery.svg',
   ),
  ),
 Text("Your text",style: TextStyle(color: Colors.black) ),
 ],
 ),
user_96521690

You try put image in decoration instead of child and add text in child container as below.

Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: NetworkImage(*imageUrl*)),
            borderRadius: BorderRadius.all(Radius.circular(6.0)),
          ),
          child: Text(*title*))
user_43990850

As I saw from the answers above you are facing an overflow problem when you are implementing these lines of code:

child: Container(
 height: 400.0,
 width: 500.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50],
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
  children: [
    SvgPicture.asset(
     'assets/images/svg/megacategory/art__grocery.svg',
    ),
    Text('Abarrotes')
)

So add these two variables under your Widget build:

Widget build(BuildContext context) {
 double width,height;
 width = MediaQuery.of(context).size.width;//This means that width== the width of the device running the app in double
 height = MediaQuery.of(context).size.height;//Same thing with the height

So now that you have the values of the device width and height you can experiment with their proportions:

child: Container(
 height: height*x,//for example if you want it to take place in 1/4 of the screen x=0.25
 width: width*x,//same thing here
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50],
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
  children: [
    SvgPicture.asset(
     'assets/images/svg/megacategory/art__grocery.svg',
    ),
    Text('Abarrotes')
)
user_112170120
Related