CODEWITHSUNDEEP
flutterflutter-layout
Deyvi Tabora
Deyvi Tabora

Reputation: 109

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

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',
   ),
)

Upvotes: 2

Views: 2516

Answers (5)

Jordan Kotiadis
Jordan Kotiadis

Reputation: 566

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')
)

Upvotes: 0

Tanuj
Tanuj

Reputation: 2260

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

Upvotes: 2

Quyen Anh Nguyen
Quyen Anh Nguyen

Reputation: 1740

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*))

Upvotes: 0

Nelson Jr.
Nelson Jr.

Reputation: 1207

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) ),
 ],
 ),

Upvotes: 0

Mohammad Shamsi
Mohammad Shamsi

Reputation: 571

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')
)

Upvotes: 0

Related Questions