Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Mobx

Como criar uma lista com mobx global? Exemplo: a lista será usada em varias telas. Tela A => Cria a lista de uma model Tela B => Alem de ter as funções dela, vai alterar um valor dessa lista que foi criada na tela A

2 respostas
solução!

Oii Anderson, tudo bem?

Vou dar algumas dicas gerais sobre como criar uma lista global com MobX no Flutter, mas você precisará adaptar o código para o seu caso específico.

  1. Crie a Store: Defina uma classe que estenda Store e adicione a lista como um Observable.
import 'package:mobx/mobx.dart';

part 'lista_store.g.dart';

class ListaStore = _ListaStore with _$ListaStore;

abstract class _ListaStore with Store {
  @observable
  ObservableList<String> lista = ObservableList<String>();

  @action
  void adicionarItem(String item) {
    lista.add(item);
  }

  @action
  void alterarItem(int index, String novoItem) {
    lista[index] = novoItem;
  }
}
  1. Instancie a Store: Crie uma instância da store em um local acessível globalmente, como no main.dart.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'lista_store.dart';

void main() {
  final listaStore = ListaStore();

  runApp(
    Provider<ListaStore>(
      create: (_) => listaStore,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TelaA(),
    );
  }
}
  1. Use a Store nas Telas: Utilize a store nas telas A e B para adicionar e modificar itens na lista.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'lista_store.dart';

class TelaA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final listaStore = Provider.of<ListaStore>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Tela A')),
      body: Column(
        children: [
          Expanded(
            child: Observer(
              builder: (_) => ListView.builder(
                itemCount: listaStore.lista.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(listaStore.lista[index]),
                  );
                },
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              listaStore.adicionarItem('Novo Item');
            },
            child: Text('Adicionar Item'),
          ),
        ],
      ),
    );
  }
}

class TelaB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final listaStore = Provider.of<ListaStore>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Tela B')),
      body: Column(
        children: [
          Expanded(
            child: Observer(
              builder: (_) => ListView.builder(
                itemCount: listaStore.lista.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(listaStore.lista[index]),
                    onTap: () {
                      listaStore.alterarItem(index, 'Item Alterado');
                    },
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Com esse setup, a ListaStore será acessível globalmente e você poderá adicionar e modificar itens da lista em qualquer tela que utilize o Provider. Depois de seguir esses passos básicos, você pode adaptar o código conforme necessário para o seu caso específico. Lembrando de que esse é apenas um guia inicial e você pode precisar fazer modificações para atender aos requisitos exatos do seu projeto.

Um abraço e bons estudos.

Muito obrigado, deu para ter uma ideia