How to set Linear Progress Indicator Height in Flutter

Progress indicators are important UI components of a mobile app. In this Flutter tutorial, let’s learn how to set linear progress indicator height.

The LinearProgressIndicator widget helps you to create a horizontal progress indicator in Flutter. It has a property named minHeight that helps to set height.

See the following code snippet.

LinearProgressIndicator(
          backgroundColor: Colors.cyan,
          color: Colors.red,
          minHeight: 10,
        )

You will get the following output.

flutter linear progress indicator height

Following is the complete code for reference.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Linear Progress Indicator Height'),
        ),
        body: const Center(
            child: LinearProgressIndicator(
          backgroundColor: Colors.cyan,
          color: Colors.red,
          minHeight: 10,
        )));
  }
}

That’s how you change the height of LinearProgressIndicator in Flutter.

If you are looking for the circular progress indicator size then see this Flutter tutorial.

Leave a Comment