Más
Cómo usar botones segmentados en Flutter con Back4app

10min
Introducción
Los Botones Segmentados son un componente de UI introducido en Material 3 que permite a los usuarios seleccionar entre dos y cinco opciones. Son particularmente útiles cuando deseas ofrecer un conjunto de opciones exclusivas o no exclusivas de manera limpia y organizada. En este tutorial, exploraremos cómo usar los Botones Segmentados en una aplicación Flutter, aprovechando Back4app como backend para almacenar y gestionar las opciones seleccionadas.
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
Una cuenta de Back4app. Regístrate para obtener una cuenta gratuita en Back4app.com.
Un entorno de desarrollo Flutter configurado en tu máquina local. Sigue la guía de instalación de Flutter si aún no lo has configurado.
Conocimientos básicos de Dart, widgets de Flutter y uso de Back4app para servicios backend.
Paso 1 – Configurando tu Backend de Back4app
Crea un Proyecto de Back4app: Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto.
Crea Clases Parse: Para este tutorial, crea una Clase Parse llamada UserPreferences para almacenar las opciones seleccionadas de los Botones Segmentados:
nombre de usuario (String): El nombre del usuario.
opcionSeleccionada (String): La opción seleccionada por el usuario.
Obtén tus Credenciales de Back4app: Navega a la configuración de tu proyecto para recuperar tu ID de Aplicación y Clave de Cliente, que necesitarás para conectar tu aplicación Flutter a Back4app.
Paso 2 – Configuración del Proyecto Flutter
Crear un Nuevo Proyecto Flutter: Abre tu terminal o símbolo del sistema y ejecuta:
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
Agregar Dependencias: Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Ejecuta flutter pub get para instalar estas dependencias.
Inicializa Parse en tu aplicación: En lib/main.dart, inicializa el SDK de Parse:
Dart
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(),
    );
  }
}
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(),
    );
  }
}
﻿
Reemplaza 'YOUR_BACK4APP_APP_ID' y 'YOUR_BACK4APP_CLIENT_KEY' con tus credenciales reales de Back4app.
Paso 3 – Implementando Botones Segmentados
Crea el Widget PreferenceScreen: En lib/main.dart, agrega un nuevo widget para mostrar y manejar los Botones Segmentados:
Dart
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();
  }
}
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 una interfaz de usuario simple con un Botón Segmentado que permite a los usuarios elegir entre tres opciones. La opción seleccionada se almacena en Back4app cada vez que cambia la selección.
Paso 4 – Ejecutando la Aplicación
Ejecuta tu aplicación usando flutter run. Deberías ver los Botones Segmentados mostrados en la pantalla. Seleccionar una opción actualizará el estado y almacenará la selección en Back4app.
Verifica los datos en Back4app iniciando sesión en tu panel de control de Back4app y revisando la UserPreferences clase. Deberías ver entradas correspondientes a tus selecciones de la aplicación Flutter.
Conclusión
En este tutorial, exploramos cómo implementar y usar Botones Segmentados en Flutter. También demostramos cómo integrar Flutter con Back4app para almacenar preferencias de usuario. Los Botones Segmentados ofrecen una forma limpia e intuitiva de presentar a los usuarios múltiples opciones, y cuando se combinan con un backend potente como Back4app, pueden mejorar significativamente la experiencia del usuario en tu aplicación.
Para más información sobre los widgets de Flutter, consulta la documentación de Flutter, y para consejos sobre integración de backend, visita la documentación de Back4app. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Construyendo y Usando una Extensión de Flutter DevTools con Back4app
Recopilación de Comentarios de Usuarios en Flutter Usando el Componente de Comentarios y Almacenando Datos en Back4app