Como Usar Botões Segmentados no Flutter com Back4app

introdução os botões segmentados são um componente de ui introduzido no material 3 que permite aos usuários selecionar de duas a cinco opções eles são particularmente úteis quando você deseja oferecer um conjunto de escolhas exclusivas ou não exclusivas de maneira limpa e organizada neste tutorial, exploraremos como usar botões segmentados em um aplicativo flutter, aproveitando o back4app como backend para armazenar e gerenciar as opções selecionadas pré requisitos antes de começar, certifique se de ter o seguinte uma conta no back4app inscreva se para uma conta gratuita em back4app com https //www back4app com um ambiente de desenvolvimento flutter configurado em sua máquina local siga o guia de instalação do flutter https //flutter dev/docs/get started/install se você ainda não o configurou conhecimento básico de dart, widgets flutter e uso do back4app para serviços de backend passo 1 – configurando seu backend no back4app crie um projeto no back4app faça login na sua conta do back4app https //www back4app com/ e crie um novo projeto crie classes parse para este tutorial, crie uma classe parse chamada userpreferences para armazenar as opções selecionadas dos botões segmentados username (string) o nome do usuário selectedoption (string) a opção selecionada pelo usuário obtenha suas credenciais do back4app navegue até as configurações do seu projeto para recuperar seu id de aplicação e chave do cliente, que você precisará para conectar seu aplicativo flutter ao back4app passo 2 – configurando o projeto flutter crie um novo projeto flutter abra seu terminal ou prompt de comando e execute flutter create segmented button example adicionar dependências abra pubspec yaml e adicione as seguintes dependências dependencies flutter sdk flutter parse server sdk flutter latest version execute flutter pub get para instalar essas dependências inicialize o parse em seu app em lib/main dart , inicialize o sdk do parse import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home preferencescreen(), ); } } substitua 'your back4app app id' e 'your back4app client key' com suas credenciais reais do back4app passo 3 – implementando botões segmentados crie o widget preferencescreen em lib/main dart , adicione um novo widget para exibir e gerenciar os botões segmentados class preferencescreen extends statefulwidget { @override preferencescreenstate createstate() => preferencescreenstate(); } class preferencescreenstate extends state\<preferencescreen> { string? selectedoption; final list\<buttonsegment\<string>> options = \[ buttonsegment(value 'option 1', label text('option 1')), buttonsegment(value 'option 2', label text('option 2')), buttonsegment(value 'option 3', label text('option 3')), ]; @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('user preferences')), body padding( padding const edgeinsets all(16 0), child column( mainaxisalignment mainaxisalignment center, children \[ segmentedbutton\<string>( segments options, selected selectedoption == null ? {} { selectedoption!}, onselectionchanged (newselection) { setstate(() { selectedoption = newselection first; }); savepreference( selectedoption!); }, ), sizedbox(height 20), if ( selectedoption != null) text('selected $ selectedoption', style textstyle(fontsize 16)), ], ), ), ); } future\<void> savepreference(string selectedoption) async { final userpreference = parseobject('userpreferences') set('username', 'test user') // this would normally come from user data set('selectedoption', selectedoption); await userpreference save(); } } este código define uma interface simples com um botão segmentado que permite aos usuários escolher entre três opções a opção selecionada é armazenada no back4app sempre que a seleção muda passo 4 – executando o app execute seu app usando flutter run você deve ver os botões segmentados exibidos na tela selecionar uma opção atualizará o estado e armazenará a seleção no back4app verifique os dados no back4app fazendo login no seu painel do back4app e verificando a userpreferences classe você deve ver entradas correspondentes às suas seleções do app flutter conclusão neste tutorial, exploramos como implementar e usar botões segmentados no flutter também demonstramos como integrar o flutter com o back4app para armazenar preferências do usuário os botões segmentados oferecem uma maneira limpa e intuitiva de apresentar várias opções aos usuários e, quando combinados com um backend poderoso como o back4app, podem melhorar significativamente a experiência do usuário do seu app para mais informações sobre widgets do flutter, confira a documentação do flutter https //flutter dev/docs , e para dicas de integração de backend, visite a documentação do back4app https //www back4app com/docs boa codificação!