CODEWITHSUNDEEP
dartflutter
S.D.
S.D.

Reputation: 5867

How to display LinearProgressIndicator in a Row with Text

I want to use a Row to display some Text then the LinearProgressIndicator in a row, using this code:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      home: Scaffold(
          body: SafeArea(child: Row(
            children: <Widget>[
              Text('Start row'),
              LinearProgressIndicator(),
            ],
          ),)),
    );   } }

The problem is nothing is displayed when I wrap the Text and the LinearProgressIndicator in a Row.

I can only get the Row to display the Text when I delete LinearProgressIndicator. And I can only get the LinearProgressIndicator to display when the Row is not used like this:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      home: Scaffold(
          body: SafeArea(child: LinearProgressIndicator(),)),
    );
  }
}

This is what the app looks like without the Row.

without row

Upvotes: 4

Views: 3021

Answers (1)

Yamin
Yamin

Reputation: 3018

You should set a width for LinearProgressIndicator widget when it's inside a row widget. the error in console explained it very clear:

BoxConstraints forces an infinite width. These invalid constraints were provided to RenderCustomPaint's layout() function by the following function, which probably computed the invalid constraints in question:

Every unbounded widget should be wrapped inside widgets like Expanded or Flexible:

In this case: 

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp',
      home: Scaffold(
          body: SafeArea(
        child: Row(
          children: <Widget>[
            Center( // this widget is not nessesary
              child: Text('Some text'),
            ),
            Expanded(child: LinearProgressIndicator()),
          ],
        ),
      )),
    );
  }
}

There is also a discussion here related to this matter.

Upvotes: 7

Related Questions