Lära 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.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 1

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn

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),
    );
  }
}

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 1