Question 225702 in Flutter Question posted in
The official Flutter documentation can be found here.

Array RenderFlex Overflowed in Flutter

Problem :

I want to show List data in Text Widget. but its OverFlowing remaining array I want to show in next line.

Image :

enter image description here

Code :

 Row(
                                children: [
                                  Icon(Icons.timer_rounded, color: Colors.deepPurpleAccent),
                                  SizedBox(width: 5),
                                  Text(
                                    '${timeslot[index]}',
                                    style: GoogleFonts.openSans(fontSize: detailsize, color: Colors.grey.shade700),
                                  ),
                                ],
                          ),

What I Tried :

If i use Expanded or Flexible its showing nothing . Image is down below.
enter image description here

Tags:

4

Answers


  1. 0

    Wrap the text widget with a flexible widget

    Row(
 children: [
Icon(Icons.timer_rounded, color: Colors.deepPurpleAccent),
  SizedBox(width: 5),
Flexible(                               
child : Text('${timeslot[index]}',
 style: GoogleFonts.openSans(fontSize: detailsize, color: Colors.grey.shade700),
    )                              ),
]
)
    Login or Signup to reply.
  2. 0

    Wrap your text inside Expanded widget

    Row(
  children: [
    const Icon(Icons.timer_rounded, color: Colors.deepPurpleAccent),
    const SizedBox(width: 5),
    Expanded(
      child: Text(
        'Put Your Extra large text here hope this time its working if its not then please let me know I will help you in your problem.',
        style: TextStyle(
          fontSize: 20,
          color: Colors.grey.shade700,
        ),
      ),
    ),
  ],
),

    Result- image

    Login or Signup to reply.
  3. 0

    Hey i created a sample basic code depend on your defined screenshot and here the my code. And i replicate your issue. And solve using below code please match or relate your container code too..

    Output of my code:

    enter image description here

    Here the code:

    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: ListView.separated(
        itemCount: 5,
        itemBuilder: (context, index) {
          return Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 15),
            decoration: const BoxDecoration(color: white),
            child: const Column(
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.gamepad,
                      color: Colors.purple,
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text('CommonZone')
                  ],
                ),
                SizedBox(
                  height: 5,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Icon(
                      Icons.timer,
                      color: Colors.purple,
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Expanded(
                      child: Text(
                          '[9:00 Am-09:30 AM,9:00 Am-09:30 AM,9:00 Am-09:30 AM,9:00 Am-09:30 AM,9:00 Am-09:30 AM,9:00 Am-09:30 AM,]'),
                    ),
                  ],
                ),
                SizedBox(
                  height: 5,
                ),
                Row(
                  children: [
                    Icon(
                      Icons.gamepad,
                      color: Colors.purple,
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text('CommonZone')
                  ],
                ),
                SizedBox(
                  height: 5,
                ),
              ],
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return const SizedBox(
            height: 25,
          );
        },
      ),
    );
  }
    Login or Signup to reply.
  4. 0

    You must put your text in SizedBox like this

            Row(
          children: [
            Icon(Icons.add),
            Expanded(child: SizedBox(child: Text('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')))
          ],
        )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search