Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Expanded constructor
3.
Frequently Asked Questions
3.1.
What is Flutter used for?
3.2.
Is Flutter better than Java?
3.3.
Is Flutter a programming language?
3.4.
What is a Flutter Checkbox?
3.5.
How do you make a checkbox clickable in flutter?
4.
Conclusion
Last Updated: Mar 27, 2024
Easy

Flutter expanded class

Author Shiva
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

 

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);
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is Flutter used for?

Flutter is Google's portable UI toolkit for crafting attractive, natively compiled mobile, web, & desktop applications from a single codebase. The Flutter works with existing code, is used by developers and organizations worldwide, and is free and open source.

Is Flutter better than Java?

Flutter is Google's Cross-platform framework that is faster, while Java language is a safer option for its strong support, documentation, and continuously updated. Different tools are also available for mobile, web, and desktop application development, but these two have the upper hand on the rest of the frameworks.

Is Flutter a programming language?

Flutter is not a programming language. Flutter is an SDK(software development kit) with prewritten code consisting of ready-to-use and customizable widgets, libraries, tools, and documentation that help build cross-platform apps.

What is a Flutter Checkbox?

A checkbox is an input component that stores a binary value. A graphical user interface element allows the user to select numerous options from various possibilities. A user can only respond with a yes or no answer. A checked/marked checkbox indicates yes, while an unchecked/unmarked checkbox indicates no value.

How do you make a checkbox clickable in flutter?

You can pass null to the “onChanged” property, which will disable the checkbox.

Conclusion

This article gives information about the Flutter expanded class and its uses. Being a Flutter developer, you must be well versed with the concepts like Flutter expanded class, which you have learned just now.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Happy Learning!

 

Live masterclass