Introduction
In this article, we will learn how to use checkboxes in Flutter. In Flutter, we can have two checkboxes: a compact version of the checkbox called "checkbox" and the "CheckboxListTile" checkbox that comes with a header & subtitle. We will discuss these Flutter checkboxes in detail.
A widget that stretches a Row, Column, or Flex's child to fill the available space.
When a child of a Row, Column, or Flex is expanded, the available space along the main axis is filled (e.g., horizontally for a Row or vertically for a Column). When more than one child is added, the available space is shared among them based on the flex factor.
The path from the Expanded widget to the enclosing Row, Column, or Flex must only contain StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
This example demonstrates how to utilize an Expanded widget in a Column such that its middle child, in this case, a Container, extends to fill the available space.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Expanded Column Sample'),
),
body: Center(
child: Column(
children: <Widget>[
Container(
color: Colors.blue,
height: 100,
width: 100,
),
Expanded(
child: Container(
color: Colors.pink,
width: 100,
),
),
Container(
color: Colors.blue,
height: 100,
width: 100,
),
],
),
),
);
}
}
This example shows how to utilize an Expanded widget in a Row with several children expanded, and how to prioritize available space using the flex factor.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Expanded Row Sample'),
),
body: Center(
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.amber,
height: 100,
),
),
Container(
color: Colors.pink,
height: 100,
width: 50,
),
Expanded(
child: Container(
color: Colors.amber,
height: 100,
),
),
],
),
),
);
}
}
Expanded constructor
Creates a widget that stretches a child of a Row, Column, or Flex to occupy all available space along the main axis of the flex widget.
const Expanded({
Key? key, int flex = 1,
required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);