TheLazy.Dev
Portfolio GitHub

Blog

flutter |designsystem |braziliandevs |dart

Design System no Flutter

redrodrigoc

Rodrigo Castro

Posted on July 22, 2024

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

9 - Usando o Design System em um projeto



dependencies:
  flutter:
    sdk: flutter
  design_system:
    path: ./design_system
Enter fullscreen mode Exit fullscreen mode

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: () {},
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Exemplo do design system

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.

💖 💪 🙅 🚩
redrodrigoc
Rodrigo Castro

Posted on July 22, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Design System no Flutter
flutter Design System no Flutter

July 22, 2024