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