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
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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