Lära Immutability and Data Modeling in Dart | Writing Clean Dart for Scalable Flutter Apps

Immutability means that once an object is created, its state cannot be changed. In Dart, you achieve immutability by declaring all fields as final and making sure you do not provide setters that allow modification after construction. Immutability is especially beneficial for Flutter state management because it ensures that widget states are predictable and do not change unexpectedly. This predictability makes debugging easier and helps you avoid subtle bugs caused by unintended side effects when data is changed from different parts of your app.

immutable_person.dart


              123456
            
class Person {
  final String name;
  final int age;

  const Person({required this.name, required this.age});
}

When you need to update the data in an immutable object, you do not modify the original instance. Instead, you use a pattern called copyWith. This method creates a new instance of the object, copying existing values and allowing you to override specific fields.

user_profile_widget.dart


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

class UserProfile {
  final String username;
  final int points;

  const UserProfile({required this.username, required this.points});

  UserProfile copyWith({String? username, int? points}) {
    return UserProfile(
      username: username ?? this.username,
      points: points ?? this.points,
    );
  }
}

class UserProfileWidget extends StatefulWidget {
  const UserProfileWidget({Key? key}) : super(key: key);

  @override
  State<UserProfileWidget> createState() => _UserProfileWidgetState();
}

class _UserProfileWidgetState extends State<UserProfileWidget> {
  UserProfile profile = const UserProfile(username: "alex", points: 0);

  void _addPoints() {
    setState(() {
      profile = profile.copyWith(points: profile.points + 10);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('User: ${profile.username}'),
        Text('Points: ${profile.points}'),
        ElevatedButton(
          onPressed: _addPoints,
          child: const Text('Add Points'),
        ),
      ],
    );
  }
}

Immutability helps prevent bugs in state management by making it impossible to accidentally change the state of an object after it has been created. This is especially important in Flutter apps, where UI updates depend on detecting changes to data. By always creating new objects instead of modifying existing ones, you make it easier to track and understand how state changes over time.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. 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

immutable_person.dart


              123456
            
class Person {
  final String name;
  final int age;

  const Person({required this.name, required this.age});
}

user_profile_widget.dart


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

class UserProfile {
  final String username;
  final int points;

  const UserProfile({required this.username, required this.points});

  UserProfile copyWith({String? username, int? points}) {
    return UserProfile(
      username: username ?? this.username,
      points: points ?? this.points,
    );
  }
}

class UserProfileWidget extends StatefulWidget {
  const UserProfileWidget({Key? key}) : super(key: key);

  @override
  State<UserProfileWidget> createState() => _UserProfileWidgetState();
}

class _UserProfileWidgetState extends State<UserProfileWidget> {
  UserProfile profile = const UserProfile(username: "alex", points: 0);

  void _addPoints() {
    setState(() {
      profile = profile.copyWith(points: profile.points + 10);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('User: ${profile.username}'),
        Text('Points: ${profile.points}'),
        ElevatedButton(
          onPressed: _addPoints,
          child: const Text('Add Points'),
        ),
      ],
    );
  }
}

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 1