In this post, you will learn how to render a list of rows or a ListView inside a Column. When implementing a ListView inside a Column, you might encounter errors. Using the examples below, you can understand how to avoid them.

Let’s get started.

• 7 Flutter Commands You Must Know
• Flutter Notes App

In this first example, I will implement list of row texts inside Column.

List of Row Inside A Column Example – I

• I have used a For loop to generate Row’s childrens.
• The for loop creates 50 rows inside the Column, if it exceeds the screen height. You will get the renderflex errors.
• To avoid yellow & black renderflex overflow errors, You can use ListView or SingleChildScrollView around the Column.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List of Row Inside A Column',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('List of Row Inside A Column'),
        ),
        body: 
        // SingleChildScrollView(
        //   child: 
          Column(
            children: [
              for (int i = 1; i <= 50; i++)
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'text $i',
                      style: const TextStyle(
                        fontSize: 18,
                      ),
                    ),
                    const SizedBox(
                      width: 20,
                    ),
                    Text(
                      'content $i',
                      style: const TextStyle(
                        fontSize: 18,
                      ),
                    ),
                  ],
                ),
            ],
          ),
        //),
      ),
    );
  }
}

• How To Remove Debug Banner In Flutter?
• How To Change ElevatedButton Color In Flutter?

List of Row Inside a Column in Flutter - II

This example is really useful for those who are making form inside a column. Here, I have used a TextField inside Row.

If you are making any login or signin form, recommended to use Form and TextFormField.

• You must aware that TextField or TextFormField inside a Row can create InputDecorator unbound width error. This is due to TextFormField does not have intrinsic width (natural width), and row wants it's childs intrinsic size and that's makes the problem
• So either Use Expanded, Flexible or SizedBox with width property around the TextField or TextFormField.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List of Row Inside A Column',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('List of Row Inside A Column'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              for (int i = 1; i <= 50; i++)
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    SizedBox(width: 10),
                    Text('Name : '),
                    SizedBox(width: 10),
                    Flexible(
                      child: TextField(
                        decoration: InputDecoration(hintText: 'name'),
                      ),
                    )
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }
}

How to use ListView inside Column In Flutter?

When you place ListView inside column, it ends with an exception most of the time. because both ListView and Column tries to expand in the main axis direction (here I am talking above Vertical direction). Flutter needs to know how much space ListView and Column needed.

Using Expanded

• Use Expanded widget around the ListView - Recommended.
• It expands the listview to take the available space inside the column.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView Inside Column Using Expanded'),
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: const Text(
                'ListView Inside Column Using Expanded',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.red,
                ),
              ),
            ),
            Expanded(
              child: ListView(
                padding: EdgeInsets.all(8),
                children: [
                  for (int i = 0; i < 50; i++)
                    Align(
                      alignment: Alignment.center,
                      child: Text('Item $i'),
                    ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Using shrinkWrap property

• By setting, shrinkWrap:true, ListView will take as much as space only the children needed.
• Actually, it will compute the size of the entire content in ListView.
• But setting shrinkWrap:true can make performance hit. So avoid it as much as you can.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView Inside Column Using shrinkWrap Property'),
        ),
        body: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                'ListView Inside Column Using shrinkWrap Property',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.red,
                ),
              ),
            ),
            ListView(
              shrinkWrap: true,
              padding: EdgeInsets.all(8),
              children: [
                for (int i = 0; i < 30; i++)
                  Align(
                    alignment: Alignment.center,
                    child: Text('Item $i'),
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Using SizedBox

• Use SizedBox around the ListView with a specific height value.
• Height of the listview turns to SizedBox height.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView Inside Column Using SizedBox'),
        ),
        body: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                'ListView Inside Column Using SizedBox',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.red,
                ),
              ),
            ),
            SizedBox(
              height: 500,
              child: ListView(
                padding: EdgeInsets.all(8),
                children: [
                  for (int i = 0; i < 50; i++)
                    Align(
                      alignment: Alignment.center,
                      child: Text('Item $i'),
                    ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

That's all for now. If you like this post, please share it with your family and friends.
Thanks.

• Expanded widget
• shrinkWrap property
• Flutter Machine Learning App Tutorial
• Flutter QR Code App Tutorial
• Android WebView App Tutorial

Do you want to change color of Elevated Button?

Then you are in the right place.

So let’s start with a simple example.

Most of the time, this is the one you really needed.

How To Change Elevated Button Color?

• Use style property of ElevatedButton and pass ElevatedButton.styleFrom().
• Inside, ElevatedButton.styleFrom(), give primary parameter and color as value.
• You can use onPrimary property to change Text Color of ElevatedButton.

ElevatedButton(
                  child: const Text('ElevatedButton'),
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    primary: Colors.deepOrangeAccent,
                    //onPrimary: Colors.black,
                  ),
                ),

How To Change Elevated Button Color Using Theme?

Sometimes you need to set same color and text color for a group of ElevatedButtons used in a form or section. You don’t need to use style property for each one. In these situations, You can use Theme widget.

• This example, I have used Column for holding two ElevatedButton and the Column is wrapped with Theme Widget.
• Theme widget provides elevatedButtonTheme property to set our style.
• You need to specify with ElevatedButtonThemeData object and style values.
• It affects all the children inside of it.

Theme(
                  data: ThemeData(
                    elevatedButtonTheme: ElevatedButtonThemeData(
                      style: ElevatedButton.styleFrom(
                        onPrimary: Colors.white,
                        primary: Colors.green,
                      ),
                    ),
                  ),
                  child: Column(
                    children: [
                      ElevatedButton(
                        child: const Text('ElevatedButton 1'),
                        onPressed: () {},
                      ),
                     const SizedBox(
                        height: 10,
                      ),
                      ElevatedButton(
                        child: const Text('ElevatedButton 2'),
                        onPressed: () {},
                      ),
                    ],
                  ),
                )

How To Change Elevated Button Color Using Theme – App level

• Using this MaterialApp theme property, you can change all ElevatedButton color in your app with simple piece of code.
• You should give ThemeData object and elevatedButtonTheme property value should be ElevatedButtonThemeData

return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter ElevatedButton Color Change Example',
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
        ),
      ),

• Flutter Folder Picker Example
• Flutter Random Number Generator

Complete Source Code

• In this, main example, I have used 3 different ways mentioned above in this post.
• First example uses the color given by App theme data. So it chooses, Red color.
• Second, ElevatedButton overrides app level theme color by using its own style. So here, ElevatedButton uses Orange color and also black for text color.
• Third one, we have used Theme Widget, using that you can change color of all the children (ElevatedButton)inside of Theme Widget.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter ElevatedButton Color Change Example',
      theme: ThemeData(
        //primarySwatch: Colors.red,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
        ),
      ),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter ElevatedButton Color Change Example'),
          ),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
        //It uses applevel theme color
        ElevatedButton(
                  child: const Text('ElevatedButton'),
                  onPressed: () {},
                ),
//Here It uses own style color by overriding app level color.
                ElevatedButton(
                  child: const Text('ElevatedButton'),
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    primary: Colors.deepOrangeAccent,
                    onPrimary: Colors.black,
                  ),
                ),
//Here, Theme provides color for the ElevatedButton.
                Theme(
                  data: ThemeData(
                    elevatedButtonTheme: ElevatedButtonThemeData(
                      style: ElevatedButton.styleFrom(
                        primary: Colors.green,
                      ),
                    ),
                  ),
                  child: Column(
                    children: [
                      ElevatedButton(
                        child: const Text('ElevatedButton 1'),
                        onPressed: () {},
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                      ElevatedButton(
                        child: const Text('ElevatedButton 2'),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

If you like this post, please share it with your family and friends.
Thanks.

• Flutter ElevatedButton With Rounded Corners
• Flutter Row Background Color Example
• Flutter ElevatedButton Docs