How to display LinearProgressIndicator in a Row with Text - dart

Question

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.

Answer 1

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.