CODEWITHSUNDEEP
flutterdart
Sagar Acharya
Sagar Acharya

Reputation: 3767

Flutter text gets a overflow on right side

I Have a card with an icon on the left Column and two texts on the Right Column, the right side first text gets an overflow. Hoe can I make the right text come to the downside on reaching the right limit.

      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: 60,
            child: Card(
              child: Row(

                children: <Widget>[
                  Column(children: <Widget>[Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Icon(Icons.access_alarm),
                  )]),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                    Row(

                      children: <Widget>[
                        Text(

                        'This is the text one This is the textThis is the textThis is the textThis is the text',
                      )],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Text('This is the second text'),
                      ],
                    )
                  ],),
                ],
              ),
            ),
          ),
        ),
      ),
    );```

Upvotes: 1

Views: 2224

Answers (1)

Mohamad Assem Nasser
Mohamad Assem Nasser

Reputation: 1109

Because Row and Column do not have a static width, it will expand to overflow the screen. To prevent that, wrap your the children with Expanded widget.

Scaffold(
      body: Container(
        height: 60,
        child: Card(
          child: Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Icon(Icons.access_alarm),
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'This is the text one This is the textThis is the textThis is the textThis is the text',
                    ),
                    Text('This is the second text'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),

I did some modifications to your code, since there were some unnecessary widgets.

Upvotes: 4

Related Questions