gp_design 0.0.2
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!),
],
],
),
);
}
}