conectar_design_system 0.1.0 copy "conectar_design_system: ^0.1.0" to clipboard
conectar_design_system: ^0.1.0 copied to clipboard

Published 11 months ago • Latest: 1.1.16
unlisted
→

Metadata

Conectar Design System - Biblioteca completa de componentes reutilizáveis para Flutter com showcase interativo

More...

Conectar Design System #

Um sistema de design completo para Flutter que fornece componentes reutilizáveis, utilitários e padrões de interface consistentes para aplicações da Conectar.

📋 Índice #

🚀 Instalação #

Adicione o seguinte ao seu pubspec.yaml:

dependencies:
  conectar_design_system:
    git:
      url: https://github.com/seu-usuario/conectar_design_system.git
      ref: main

⚙️ Configuração #

Inicialização básica #

import 'package:conectar_design_system/conectar_design_system.dart';

void main() {
  // Configuração opcional do sistema
  ConectarDesignSystem.init(
    systemSettings: ConectarSettings(
      primaryColor: Color(0xff1bb17a),
      backgroundColor: Color(0xFFfafafa),
      successColor: Color(0xFF4CAF50),
      textColor: Color(0xFF000000),
      borderColor: Color(0xFFDEE2E6),
      cardRadius: 6,
      paddingDefault: 16,
    ),
  );

  runApp(MyApp());
}

Configurações Disponíveis #

  • primaryColor: Cor principal do tema (padrão: #1bb17a)
  • backgroundColor: Cor de fundo (padrão: #fafafa)
  • successColor: Cor de sucesso (padrão: #4CAF50)
  • textColor: Cor do texto (padrão: #000000)
  • borderColor: Cor das bordas (padrão: #DEE2E6)
  • cardRadius: Raio dos cartões (padrão: 6)
  • paddingDefault: Padding padrão (padrão: 16)

🧩 Componentes #

Botões #

MyButton

Botão principal com estilo customizável.

MyButton(
  text: "Confirmar",
  onPressed: () => print("Botão pressionado"),
  width: 200,
  height: 48,
  backgroundColor: Colors.blue,
  icon: Icon(Icons.check),
)

MyFlatButton

Botão sem preenchimento para ações secundárias.

MyFlatButton(
  text: "Cancelar",
  onPressed: () => print("Cancelar"),
)

MyLinkButton

Botão estilo link para navegação.

MyLinkButton(
  text: "Esqueceu a senha?",
  onPressed: () => Navigator.push(...),
)

Campos de Formulário #

MyTextFormField

Campo de texto com validação e customização completa.

MyTextFormField(
  label: "Nome completo",
  hintText: "Digite seu nome",
  controller: nameController,
  validator: (value) => value?.isEmpty == true ? "Campo obrigatório" : null,
  required: true,
  prefixIcon: Icon(Icons.person),
  maxLength: 50,
  textCapitalization: TextCapitalization.words,
)

MyDrowdownFormField

Dropdown com integração ao BaseModel.

MyDrowdownFormField<StatusModel>(
  label: "Status",
  items: statusList,
  selectedItem: currentStatus,
  onChanged: (status) => setState(() => currentStatus = status),
  validator: (value) => value == null ? "Selecione um status" : null,
  required: true,
)

MyCurrencyFormField

Campo especializado para valores monetários.

MyCurrencyFormField(
  label: "Valor",
  controller: valueController,
  onChanged: (value) => print("Valor: $value"),
  validator: (value) => value?.isEmpty == true ? "Informe o valor" : null,
)

MyDebouncedTextFormField

Campo de texto com debounce para busca em tempo real.

MyDebouncedTextFormField(
  label: "Buscar produto",
  onChanged: (value) => searchProducts(value),
  debounceTime: Duration(milliseconds: 500),
)

MyMultiSelectDropdownFormField

Dropdown com seleção múltipla.

MyMultiSelectDropdownFormField<CategoryModel>(
  label: "Categorias",
  items: categories,
  selectedItems: selectedCategories,
  onChanged: (selected) => setState(() => selectedCategories = selected),
)

Cartões e Containers #

MyBaseCard

Container base com título e estilo consistente.

MyBaseCard(
  title: "Informações do Usuário",
  subTitle: "Dados pessoais e de contato",
  showBullet: true,
  bulletColor: Colors.green,
  child: Column(
    children: [
      // Conteúdo do cartão
    ],
  ),
)

CustomDialog (MyModalView)

Modal customizável para exibição de conteúdo.

showDialog(
  context: context,
  builder: (context) => CustomDialog(
    width: 400,
    height: 300,
    child: YourContentWidget(),
  ),
);

MyTabbar

Barra de abas customizável.

MyTabbar(
  tabs: ["Aba 1", "Aba 2", "Aba 3"],
  onTabChanged: (index) => print("Aba $index selecionada"),
)

Feedback #

MyAlertView

Sistema de alertas e diálogos.

MyAlertView(context).show(
  message: "Operação realizada com sucesso!",
  buttonTitle: "OK",
  onPressedOk: () => Navigator.pop(context),
);

MyAnimatedStarRating

Sistema de avaliação com estrelas animadas.

MyAnimatedStarRating(
  rating: 4.5,
  onRatingChanged: (rating) => print("Avaliação: $rating"),
  starCount: 5,
)

CustomLoadingOverlay

Overlay de carregamento.

CustomLoadingOverlay(
  isLoading: isLoadingData,
  child: YourContentWidget(),
)

MyNotificationIcon

Ícone de notificação com contador.

MyNotificationIcon(
  notificationCount: 5,
  onTap: () => Navigator.push(...),
)

Seleção #

MyCheckboxGroup

Grupo de checkboxes com validação.

MyCheckboxGroup<OptionModel>(
  options: availableOptions,
  onChanged: (selected) => print("Selecionados: $selected"),
  label: "Selecione as opções",
  required: true,
  validator: (selected) => selected?.isEmpty == true ? "Selecione ao menos uma opção" : null,
)

MyRoundedCheckbox

Checkbox com estilo arredondado.

MyRoundedCheckbox(
  value: isChecked,
  onChanged: (value) => setState(() => isChecked = value),
  label: "Aceito os termos de uso",
)

MyRadionOptions

Grupo de radio buttons.

MyRadionOptions<String>(
  options: ["Opção 1", "Opção 2", "Opção 3"],
  selectedValue: selectedOption,
  onChanged: (value) => setState(() => selectedOption = value),
)

MySwitchButton

Switch personalizado.

MySwitchButton(
  value: isEnabled,
  onChanged: (value) => setState(() => isEnabled = value),
  label: "Ativar notificações",
)

Mídia #

MyImagePicker

Seletor de imagens com suporte web e mobile.

MyImagePicker(
  onImageSelected: (image) => print("Imagem selecionada: $image"),
  width: 200,
  height: 200,
  label: "Selecionar foto de perfil",
  imageUrl: currentImageUrl,
)

Tabelas #

MyTableView

Tabela completa com paginação e funcionalidades avançadas.

MyTableView<UserModel>(
  title: "Lista de Usuários",
  model: paginatedUsers,
  columns: [
    TableColumn(key: "name", label: "Nome"),
    TableColumn(key: "email", label: "E-mail"),
    TableColumn(key: "status", label: "Status"),
  ],
  onTap: (user) => editUser(user),
  onNext: (page) => loadPage(page),
  onPrevious: (page) => loadPage(page),
  onAdd: () => createNewUser(),
)

Outros Componentes #

MySearchField

Campo de busca especializado.

MySearchField(
  hintText: "Buscar...",
  onChanged: (query) => performSearch(query),
  onClear: () => clearSearch(),
)

MyPaginatedComponent

Componente de paginação.

MyPaginatedComponent(
  currentPage: currentPage,
  totalPages: totalPages,
  onPageChanged: (page) => loadPage(page),
)

MyFilterView

Interface para filtros.

MyFilterView(
  filters: availableFilters,
  selectedFilters: currentFilters,
  onFiltersChanged: (filters) => applyFilters(filters),
)

MyCalendarPicker

Seletor de datas.

MyCalendarPicker(
  selectedDate: selectedDate,
  onDateSelected: (date) => setState(() => selectedDate = date),
  label: "Data de nascimento",
)

MyRegisterSteps

Componente para fluxos de registro com etapas.

MyRegisterSteps(
  currentStep: currentStep,
  totalSteps: 4,
  onStepChanged: (step) => navigateToStep(step),
)

🛠️ Utilitários #

Responsive #

Utilitário para responsividade.

Responsive.isMobile(context)
Responsive.isTablet(context)
Responsive.isDesktop(context)

Debounce #

Utilitário para debounce de funções.

final debouncer = Debouncer(milliseconds: 500);
debouncer.run(() => performSearch(query));

RequestHandler #

Manipulador de requisições HTTP.

final handler = RequestHandler();
final response = await handler.get('/api/users');

DocumentValidator #

Validador de documentos brasileiros.

DocumentValidator.isValidCPF(cpf)
DocumentValidator.isValidCNPJ(cnpj)

📊 Modelos #

BaseModel #

Classe base para todos os modelos.

class UserModel extends BaseModel {
  final String name;
  final String email;

  UserModel({required this.name, required this.email});

  @override
  String get label => name;

  @override
  String get value => email;
}

PaginatedModel #

Modelo para dados paginados.

PaginatedModel<UserModel>(
  data: users,
  currentPage: 1,
  totalPages: 10,
  totalItems: 100,
)

✅ Validadores #

TaxInputFormatter #

Formatador para documentos fiscais.

TextFormField(
  inputFormatters: [TaxInputFormatter()],
)

🔧 Extensões #

DateExtension #

Extensões para DateTime.

DateTime.now().formatBR() // "25/12/2023"
DateTime.now().isToday()

StringExtension #

Extensões para String.

"João Silva".initials() // "JS"
"12345678000195".formatCNPJ() // "12.345.678/0001-95"

📱 Exemplo de Uso Completo #

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

class ExamplePage extends StatefulWidget {
  @override
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Exemplo")),
      body: Form(
        key: _formKey,
        child: MyBaseCard(
          title: "Cadastro de Usuário",
          child: Column(
            children: [
              MyTextFormField(
                label: "Nome",
                controller: _nameController,
                required: true,
                validator: (value) => value?.isEmpty == true ? "Campo obrigatório" : null,
              ),
              SizedBox(height: 16),
              MyTextFormField(
                label: "E-mail",
                controller: _emailController,
                keyboardType: TextInputType.emailAddress,
                required: true,
                validator: (value) => value?.isEmpty == true ? "Campo obrigatório" : null,
              ),
              SizedBox(height: 24),
              MyButton(
                text: "Salvar",
                onPressed: () {
                  if (_formKey.currentState?.validate() == true) {
                    // Processar dados
                    MyAlertView(context).show(
                      message: "Usuário cadastrado com sucesso!",
                    );
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

🤝 Contribuição #

Para contribuir com o projeto:

  1. Faça um fork do projeto
  2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
  3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
  4. Push para a branch (git push origin feature/AmazingFeature)
  5. Abra um Pull Request

📄 Licença #

Este projeto está sob a licença especificada no arquivo LICENSE.

🌐 Links #

Versão atual: 0.0.39

← Metadata

1
likes
0
points
606
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

Conectar Design System - Biblioteca completa de componentes reutilizáveis para Flutter com showcase interativo

Homepage

License

unknown (license)

Dependencies

auto_size_text, cached_network_image, dio, dropdown_button2, file_picker, flutter, flutter_svg, flutter_web_plugins, get, get_storage, google_fonts, image_picker, image_picker_web, intl, loader_overlay, plugin_platform_interface, shared_preferences, url_launcher, web, youtube_player_flutter

More

Packages that depend on conectar_design_system

Packages that implement conectar_design_system

Back