Apprendre Classes and Constructors in Flutter Widgets

Dart uses classes as the foundation for building custom types, and this is especially important in Flutter, where almost everything is a widget—a class that describes part of the user interface. A class in Dart defines the structure and behavior of objects, and a constructor is a special function within a class that is called when you create an instance of that class. In Flutter, you use constructors to pass configuration and data into widgets, allowing you to reuse and customize UI components easily. Constructors can have parameters, and these parameters often control how the widget appears or behaves.

main.dart


              1234567891011
            
import 'package:flutter/material.dart';

class MySimpleWidget extends StatelessWidget {
  // Default constructor
  const MySimpleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Hello from MySimpleWidget!');
  }
}

Named Constructors for Widget Customization

Named constructors in Dart allow you to create multiple ways to initialize a class, each with a unique name. This is useful for Flutter widgets when you want to provide different preset configurations or initialization logic, making your custom widgets more flexible and expressive.

main.dart


              12345678910111213141516
            
import 'package:flutter/material.dart';

class CustomMessageWidget extends StatelessWidget {
  final String message;

  // Default constructor
  const CustomMessageWidget({super.key, required this.message});

  // Named constructor with a preset message
  CustomMessageWidget.welcome({super.key}) : message = 'Welcome!';

  @override
  Widget build(BuildContext context) {
    return Text(message);
  }
}

Note

In Flutter, marking constructor parameters as required helps prevent common bugs by ensuring that essential data is always provided when creating a widget. This makes your code safer and your widgets more predictable.

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 3

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Glissez pour afficher le menu

main.dart


              1234567891011
            
import 'package:flutter/material.dart';

class MySimpleWidget extends StatelessWidget {
  // Default constructor
  const MySimpleWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Hello from MySimpleWidget!');
  }
}

Named Constructors for Widget Customization

main.dart


              12345678910111213141516
            
import 'package:flutter/material.dart';

class CustomMessageWidget extends StatelessWidget {
  final String message;

  // Default constructor
  const CustomMessageWidget({super.key, required this.message});

  // Named constructor with a preset message
  CustomMessageWidget.welcome({super.key}) : message = 'Welcome!';

  @override
  Widget build(BuildContext context) {
    return Text(message);
  }
}

Note

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 3