Home > Mobile >  Text not going into scroll, keeps overflowing to right
Text not going into scroll, keeps overflowing to right

Time:04-06

I am trying to create container widget with full width and fixed height. My text keeps overflowing to the right side instead of being in a scroll. What am I doing wrong? The parent widget is Positioned in stack.

A RenderFlex overflowed by 176 pixels on the right.

 @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
          width: MediaQuery.of(context).size.width,
          height: 150,
          decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: const Offset(0, 3), // changes position of shadow
                ),
              ],
              image: const DecorationImage(
                  image: AssetImage("assets/images/texture_big.jpg"),
                  fit: BoxFit.cover)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    children: [
                              if (image)
                                Container(
                                  width: 80,
                                  height: 80,
                                  decoration: BoxDecoration(
                                      image: DecorationImage(
                                          image: NetworkImage('$imageUrl'),
                                          fit: BoxFit.cover)),
                                ),
                              SingleChildScrollView(
                                child: Text('daw dadwa dadadada dawdadawod wauhjdwaijh awujid jiuoawdd ada',
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 16,
                                        color: Colors.black,
                                        fontFamily: 'Montserrat')),
                              ),
                              const SizedBox(height: 8.0),
                    ],
                  )
                ],
              ),
            ],
          )),
    );
  }

CodePudding user response:

I think that, while you using a stack widget, the text widget doesn't have a parent widget with width to inherit it, please can you try to wrap the SignleChildScrollView with Container Widget and give it a width of MediaQuery.of(context).size.width

  • Related