flutter - RenderFlex issue with Text widget nested in Row in Flutter

Question

I am using the below widget in a list view builder to list the array index wise, which is working alright, but when the text is overflowed as shown in the screenshot attached, the code below is implemented for the same, how should I rectify it?

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text(
      //"STEPS ${index + 1}",
      "${index + 1}.  ${widget.steps[index]['step']}",
      style: TextStyle(
        color: Colors.black45,
        fontFamily: 'Montserrat',
        fontSize: 16,
        fontWeight: FontWeight.w400
      ),
    ),
  ],
)

Image,

Answer 1

Add overflow: TextOverflow.ellipsis to your code.

                                 Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                   
                                      Text(
                                        //"STEPS ${index + 1}",
                                        "${index + 1}.  ${widget.steps[index]['step']}",
                                          overflow: TextOverflow.ellipsis,  //Add this line to your code.
                                        style: TextStyle(
                                            color: Colors.black45,
                                            fontFamily: 'Montserrat',
                                            fontSize: 16,
                                            fontWeight: FontWeight.w400),
                                      ),

                                    ],
                                  )

Answer 2

You can copy paste run full code below
You can use Expanded and overflow: TextOverflow.ellipsis
code snippet

return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Text(
            //"STEPS ${index + 1}",
            "${index + 1} long string 1" * 10,
            overflow: TextOverflow.ellipsis,

working demo

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
          itemCount: 5,
          itemBuilder: (BuildContext ctxt, int index) {
            return Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Text(
                    //"STEPS ${index + 1}",
                    "${index + 1} long string 1" * 10,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.black45,
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        fontWeight: FontWeight.w400),
                  ),
                ),
              ],
            );
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}