Design System no Flutter

O desenvolvimento de aplicativos móveis eficazes requer não apenas uma base sólida em termos de funcionalidades, mas também uma abordagem coesa e consistente para o design da interface do usuário. Um Design System é fundamental para atingir esse objetivo, oferecendo um conjunto de padrões reutilizáveis e modularizados que promovem a consistência, eficiência e escalabilidade.

O que é um Design System?

Um Design System é um conjunto de padrões e componentes reutilizáveis que auxiliam no desenvolvimento de UIs padronizadas, bonitas e obviamente garantindo uma experiência consistente todas as partes de um produto Digital. No Flutter (ou em qualquer outro frontend), o design system faz com que nós devs foquemos mais em solucionar os requisitos funcionais e menos em construir as mesmas telas padronizadas para o nosso aplicativo.

1 - Configurando o projeto

Primeiro vamos criar um novo projeto, podemos criar dentro da pasta principal do app e/ou criar um package externo para ser reutilizável.

flutter create --template=package design_system

Isso cria a estrutura básica do package onde você pode começar a adicionar seus componentes e estilos.

2 - Definindo as diretrizes de design

Antes de começar a codar, defina as diretrizes de design que seu sistema seguirá. Isso inclui:
- Paleta de Cores: Defina cores primárias, secundárias, de fundo, de texto, etc.
- Tipografia: Escolha fontes, tamanhos e estilos de texto.
- Componentes Personalizáveis: Flutter permite criar componentes altamente personalizáveis e reutilizáveis.

3 - Estruturando o package

Organize seu package de maneira que seja fácil de entender e manter. Uma estrutura comum pode ser:

lib/
├── src/
│   ├── components/
│   │   └── button.dart
│   ├── theme/
│   │   ├── colors.dart
│   │   ├── text_styles.dart
│   │   └── theme.dart
│   └── utils/
│       └── spacing.dart
└── design_system.dart

4 - Criando paleta de cores

No arquivo lib/src/theme/colors.dart, defina sua paleta de cores:

import 'package:flutter/material.dart';

class AppColors {
  static const Color primary = Color(0xFF6200EE);
  static const Color primaryVariant = Color(0xFF3700B3);
  static const Color secondary = Color(0xFF03DAC6);
  static const Color secondaryVariant = Color(0xFF018786);
  static const Color background = Color(0xFFFFFFFF);
  static const Color surface = Color(0xFFFFFFFF);
  static const Color error = Color(0xFFB00020);
  static const Color onPrimary = Color(0xFFFFFFFF);
  static const Color onSecondary = Color(0xFF000000);
  static const Color onBackground = Color(0xFF000000);
  static const Color onSurface = Color(0xFF000000);
  static const Color onError = Color(0xFFFFFFFF);
}

No flutter 0xFF representa uma cor hexadecimal

5 - Definindo estilos de texto

No arquivo lib/src/theme/text_styles.dart, defina seus estilos de texto:

import 'package:flutter/material.dart';

class TextStyles {
  static const TextStyle headline1 = TextStyle(
    fontSize: 96,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  );
  static const TextStyle bodyText1 = TextStyle(
    fontSize: 16,
    color: Colors.black,
  );
  // Adicione mais estilos conforme necessário
}

6 - Criando um tema

No arquivo lib/src/theme/theme.dart, defina seu tema:

import 'package:flutter/material.dart';

import 'colors.dart';
import 'text_styles.dart';

class AppTheme {
  static ThemeData get lightTheme {
    return ThemeData(
      primaryColor: AppColors.primary,
      primaryColorLight: AppColors.primaryVariant,
      textTheme: const TextTheme(
        displayLarge: TextStyles.headline1,
        bodyLarge: TextStyles.bodyText1,
      ),
      colorScheme: ColorScheme.fromSwatch().copyWith(
        secondary: AppColors.secondary,
        surface: AppColors.background,
      ),

      // Adicione mais customizações conforme necessário
    );
  }
}

7 - Criando componentes reutilizáveis

No arquivo lib/src/components/button.dart, crie um componente de botão personalizado:

import 'package:flutter/material.dart';

import '../theme/colors.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  const CustomButton({super.key, required this.label, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: AppColors.primary,
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
        // Adicione mais propriedades de estilo conforme necessário
      ),
      onPressed: onPressed,
      child: Text(
        label,
        style: const TextStyle(color: AppColors.onPrimary),
      ),
    );
  }
}

8 - Exportando seu design system
No arquivo lib/design_system.dart, exporte todas as suas definições:

library design_system;

export 'src/components/button.dart';
export 'src/theme/colors.dart';
export 'src/theme/text_styles.dart';
export 'src/theme/theme.dart';

9 - Usando o Design System em um projeto

dependencies:
  flutter:
    sdk: flutter
  design_system:
    path: ./design_system

Em seu projeto, importe e utilize o Design System:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.lightTheme,
      home: Scaffold(
        appBar: AppBar(title: Text('Design System Example')),
        body: Center(
          child: CustomButton(
            label: 'Press Me',
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

Conclusão

Criar um Design System no Flutter permite uma estrutura modular e reutilizável. Isso facilita a manutenção e a escalabilidade do seu aplicativo, garantindo uma experiência de usuário consistente e de alta qualidade. Com as diretrizes e componentes bem definidos, você pode rapidamente aplicar seu Design System em diferentes projetos e manter a uniformidade visual e funcional.

Comments

[Mateus Ferreira Rodrigues]

💜