Вивчайте Passing Data Down the Widget Tree | Lifting State and Widget Communication

In Flutter, data typically flows down the widget tree from parent widgets to their children. This is accomplished by passing data as constructor parameters when creating child widgets. By doing so, you ensure that each child has access to the information it needs to render itself properly. This pattern promotes a clear and predictable structure, where parents own the data and children receive it as needed, without directly accessing or modifying their parents’ state. Passing data down the widget tree is foundational to building maintainable and understandable Flutter applications.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ParentWidget(),
    );
  }
}

class ParentWidget extends StatelessWidget {
  final String message = "Hello from ParentWidget!";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Passing Data Example')),
      body: Center(
        child: ChildWidget(receivedMessage: message),
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final String receivedMessage;

  const ChildWidget({Key? key, required this.receivedMessage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      receivedMessage,
      style: TextStyle(fontSize: 24),
    );
  }
}

In the previous code, ParentWidget creates a string variable called message. When building its widget tree, it passes this string to ChildWidget using the receivedMessage constructor parameter. The ChildWidget declares a final field, receivedMessage, and marks it as required in its constructor. Inside its build method, ChildWidget displays the message using a Text widget. This approach ensures that the child receives its data from the parent every time it is built, making the data flow explicit and easy to follow.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 1

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Свайпніть щоб показати меню

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ParentWidget(),
    );
  }
}

class ParentWidget extends StatelessWidget {
  final String message = "Hello from ParentWidget!";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Passing Data Example')),
      body: Center(
        child: ChildWidget(receivedMessage: message),
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  final String receivedMessage;

  const ChildWidget({Key? key, required this.receivedMessage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      receivedMessage,
      style: TextStyle(fontSize: 24),
    );
  }
}

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 1