gp_design 0.0.2 copy "gp_design: ^0.0.2" to clipboard
gp_design: ^0.0.2 copied to clipboard

Colección de componentes y utilidades para construir apps Flutter consistentes con el diseño GP.

example/lib/main.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:gp_design/gp_design.dart';

void main() {
  runApp(const DemoApp());
}

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GP Design Demo',
      home: Builder(
        builder: (context) {
          final brightness = MediaQuery.of(context).platformBrightness;
          final light = GpTheme.light(context);
          final dark = GpTheme.dark(context);

          return Theme(
            data: brightness == Brightness.dark ? dark : light,
            child: const DemoHome(),
          );
        },
      ),
    );
  }
}

class DemoHome extends StatefulWidget {
  const DemoHome({super.key});

  @override
  State<DemoHome> createState() => _DemoHomeState();
}

class _DemoHomeState extends State<DemoHome> {
  final Dio _dio = Dio(BaseOptions(baseUrl: 'https://httpbin.org'))
    ..interceptors.addAll([
      AuthInterceptor(() async => Future.value('demo-token')),
      ErrorInterceptor(),
    ]);

  bool _loading = false;
  String? _responseMessage;

  Future<void> _simulateRequest() async {
    setState(() {
      _loading = true;
      _responseMessage = null;
    });

    try {
      await _dio.get('/status/500');
      setState(() => _responseMessage = 'Petición simulada con token Bearer.');
    } on DioException catch (error) {
      final customError = error.error;
      setState(() {
        _responseMessage = customError is GpException
            ? customError.message
            : (error.message ?? 'Error desconocido');
      });
    } finally {
      if (mounted) {
        setState(() => _loading = false);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Scaffold(
      appBar: const GpAppBar(title: 'GP Design Demo'),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          GpText(
            text: 'Componentes principales',
            style: theme.textTheme.titleLarge,
          ),
          const SizedBox(height: 12),
          GpButton(
            text: 'Mostrar diálogo',
            onPressed: () => showDialog<void>(
              context: context,
              builder: (_) => Dialog(
                child: GpAlertDialog(
                  title: '¡Hola!',
                  message: 'Este es el diálogo de GP listo para usarse.',
                  onPressed: () => debugPrint('Dialog closed'),
                ),
              ),
            ),
          ),
          const SizedBox(height: 24),
          GpRow(
            gutter: 16,
            children: const [
              GpCol(
                span: 4,
                child: Card(
                  child: Padding(
                    padding: EdgeInsets.all(16),
                    child: GpText(text: 'Span 4/12'),
                  ),
                ),
              ),
              GpCol(
                span: 4,
                child: Card(
                  child: Padding(
                    padding: EdgeInsets.all(16),
                    child: GpText(text: 'Span 4/12'),
                  ),
                ),
              ),
              GpCol(
                span: 4,
                child: Card(
                  child: Padding(
                    padding: EdgeInsets.all(16),
                    child: GpText(text: 'Span 4/12'),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          GpListTile(
            title: 'ListTile GP',
            subtitle: 'Ideal para settings o listados',
            trailing: const Icon(Icons.arrow_forward_ios, size: 16),
            onTap: () {},
            backgroundColor: theme.colorScheme.surface,
          ),
          const SizedBox(height: 24),
          GpButton(
            text: _loading ? 'Enviando...' : 'Simular petición',
            loading: _loading,
            onPressed: _loading ? null : _simulateRequest,
          ),
          if (_responseMessage != null) ...[
            const SizedBox(height: 12),
            GpText(text: _responseMessage!),
          ],
        ],
      ),
    );
  }
}
0
likes
140
points
15
downloads

Publisher

unverified uploader

Weekly Downloads

Colección de componentes y utilidades para construir apps Flutter consistentes con el diseño GP.

Repository (GitHub)
View/report issues

Topics

#design-system #ui-widgets #responsive

Documentation

Documentation
API reference

License

unknown (license)

Dependencies

cached_network_image, collection, country_code_picker, dio, flutter, flutter_svg

More

Packages that depend on gp_design