Mobx.dart: Observer cant trigger the ListView.builder?

[dumplings]

Sorry, I don't know if this is a mobx issue, or I won't use the ListView. please help me. thanks.

the code is below:

// store file.
import 'package:mobx/mobx.dart';

part 'task_list.g.dart';

class Task {
  num id;
  String name;

  Task(this.id, this.name);
}

class TaskList = _TaskList with _$TaskList;

abstract class _TaskList with Store {
  @observable
  String owner = 'oo';

  @observable
  List<Task> items = [];

  @action
  void changeOwner(String newName) {
    owner = newName;
  }

  @action
  void deleteTask(index) {
    items.removeAt(index);
  }

  @action
  void addTask(Task task) {
    items.add(task);
  }

  @action
  void modifyTaskNameByIndex(num index, String name) {}
}

TaskList taskList = TaskList();

the point is about the addTask function cant use. i should reload the files, it only work.

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx_demo/stores/task_list.dart';
import 'dart:math';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Demo'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Observer(
                builder: (_) => Text(taskList.owner),
              ),
              RaisedButton(
                child: Text('taskList.changeOwner'),
                onPressed: () => taskList.changeOwner('yoyo'),
              ),
              Observer(
                builder: (_) => ListView.builder(
                      shrinkWrap: true,
                      itemCount: taskList.items.length,
                      itemBuilder: (BuildContext context, int index) {
                        List<Task> items = taskList.items;
                        return ListTile(
                          leading: Icon(Icons.people),
                          title: Text(
                            '${items[index].id.toString()} ${items[index].name}',
                          ),
                          onTap: () {
                            taskList.deleteTask(index);
                          },
                        );
                      },
                    ),
              ),
              RaisedButton(
                child: Text('taskList.addTask'),
                onPressed: () {
                  num temp = Random().nextInt(100);
                  Task task = Task(temp, temp.toString());
                  taskList.addTask(task);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

thanks.

[dumplings]

hi, i just did a test. Provider is ok. the problem is how to manage the list with mobx.

import 'package:mobx/mobx.dart';

part 'task_list.g.dart';

class TaskList = _TaskList with _$TaskList;

abstract class _TaskList with Store {
  @observable
  List<num> items = [];

  @action
  void addTask(num number) {
    items.add(number);
  }
}

TaskList taskList = TaskList();

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx_demo/stores/task_list.dart';
import 'dart:math';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Demo'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Observer(
                builder: (_) => Text(taskList.items.length.toString()),
              ),
              RaisedButton(
                child: Text('taskList.addTask'),
                onPressed: () => taskList.addTask(1),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

that's look like ok, but not work. why?

[pavanpodila]

You need to use an ObservableList<T> instead of a plain List<T>.

With this change, you should be good.

  @observable
  ObservableList<Task> items = [];

[dumplings]

@pavanpodila thanks. it is work.
but, I want to know where to introduce the use of ObservableList in the documentation.
https://mobx.pub/getting-started#prepare

thanks.

[pavanpodila]

I think you should link to an Example that uses the ObservableList<T>. You could add a section that talks about the next things you look at after the "Getting Started"

[yaymalaga]

@dumplings You can check it here https://mobx.pub/guides/when-does-mobx-react

[dumplings]

yes, i link to the example. but i still think i'm a new guy to learn mobx, the documentation can list all method to me.
but thank you very much for your help. thank you.

[dumplings]

@yaymalaga thank you.