Saltar al contenido principal

Instalación en Flutter

Aprende cómo instalar y configurar el Sistema de Diseño de Tiendana para proyectos Flutter.

Requisitos Previos​

  • Flutter 3.x o superior
  • Dart 3.x o superior

Instalación​

Agrega tiendana_uikit a tu pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  tiendana_uikit: ^1.0.0

Luego ejecuta:

flutter pub get

Configuración​

1. Importar el Paquete​

Importa el paquete en tus archivos Dart:

import 'package:tiendana_uikit/tiendana_uikit.dart';

2. Configurar el Tema​

Configura el tema de Tiendana en tu MaterialApp:

import 'package:flutter/material.dart';
import 'package:tiendana_uikit/tiendana_uikit.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tiendana App',
      theme: TiendanaTheme.light(),
      darkTheme: TiendanaTheme.dark(),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

3. Usar Componentes​

Usa los widgets de Tiendana en tu app:

import 'package:flutter/material.dart';
import 'package:tiendana_uikit/tiendana_uikit.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tiendana UI Kit'),
      ),
      body: Center(
        child: TdnButton(
          label: 'Click me',
          variant: ButtonVariant.primary,
          onPressed: () {
            print('Button pressed!');
          },
        ),
      ),
    );
  }
}

Configuración de Assets​

Algunos componentes usan assets (iconos, fuentes, animaciones). Asegúrate de incluirlos en tu pubspec.yaml:

flutter:
  uses-material-design: true
  
  assets:
    - packages/tiendana_uikit/assets/
    - packages/tiendana_uikit/assets/svgs/
  
  fonts:
    - family: TiendanaIcons
      fonts:
        - asset: packages/tiendana_uikit/fonts/TiendanaIcons.ttf

Próximos Pasos​

Registro Privado​

Paquete Privado

Actualmente tiendana_uikit puede estar alojado en un registro privado o repositorio Git privado. Consulta con tu equipo para obtener acceso.

Si estás usando un registro privado:

  1. Configura las credenciales según tu pipeline CI/CD
  2. Si usas un repositorio Git privado, asegúrate de tener acceso SSH configurado
  3. Para pub.dev privado, configura PUB_HOSTED_URL según sea necesario