Esta é a implementação em flutter para o desing system Stardust. (Veja no Figma)https://www.figma.com/file/vdAuqiG0HMatHTgBhHbqPy/Stardust-Design-System?type=design&node-id=136-3747&t=2zNQ3Tvm86kCn24T-0 o conceito do desing.

Para utilizar esse projeto você precisa ter o flutter instaldo em sua maquina. (Clique aqui e saiba como instalar.)https://docs.flutter.dev/get-started/install

Confira (aqui)https://vimeo.com/838018865/b4dd3f22ac um video demostrando como criar um aplicativo para consultar o preço médio de um produto pelo código de barras.

Veja a baixo como clonar e rodar o projeto de exemplo:

Example

Abra um terminal de comando e execulte os camandos a seguir:

git clone git@bitbucket.org:ubistrt/ubi-ds-flutter.git
cd ubi-ds-flutter/example
flutter run

Após rodar esses três comandos acima o aplicativo será compilado e em seguida ele será aberto na sua tela.

Ícones

Para adicionar ou atualizar ícones, entre na subpasta ./icons e nela atualize os ícones desejados, em seguida execute o seguinte comando dart run :generate_icons na raiz do projeto para recriar o arquivo StardustIcons.ttf

Criando uma aplicativo Stardust do zero.

Para criar um aplicativo do zero é muito fácil, basta começar com o template padrão do flutter e adicionar o pacote do startdus, vamos lá:

flutter create my_app Agora abra a pasta my_app em sua IDE preferida, como o VS Code ou Android Studio. Abra o arquivo pubspec.yaml e adicione na secção dependencies: as seguinte linhas:

dependencies:
  stardust: ^1.0.0

Como usar

Agora é so usar a lib stardust, primeiro importe o pacote e declare os componentes que deseja, veja o exemplo:

import 'package:stardust/stardust.dart';

...

Select<String>
(
decoration:
InputDecoration(labelText: 'Select', hintText: 'chose one'),
items: ['11111', 'aaaaaa', 'abcdefg', '1234567'],
),

Menu(
icon: Icons.android,
title: Text('Menu branco'),
children: [
Menu(
title: Text('sub i'),
onTap: () {},
),
Text('texto aleatorio')
],
),

Tag(
expanded: true,
label: Text('Tag1 Expandida'),
iconRight: IconButton(
icon: Icon(Icons.expand),
onPressed: () {},
padding: EdgeInsets.zero
),
),

Componentes implementados

Nome Desktop Mobile
Brand Colors x x
Positive Feedback Colors x x
Negative Feedback Colors x x
Satus Color Palet x x
Color Schemes x x
Neutral Colors x x
Font Weights x x
Line Heights x x
Font Sizes x x
Border Radius x x
Border Width x x
Fixed Heights x x
Spacing x x
Drop Shadow
Inner Shadow
Paddings
Buttons x x
Input x x
Text Area
Select x
Select.multiples -
Date Picker
Tags x x
Badges x x
Profile Picture Upload
File Upload
Toasts
Skeleton x x
Standard PopUps
404 Error Screens
Icons

Additional information

Esta biblioteca foi construida tendo como base os conceitos representado no Figma (link acima) e usando a implementação do Material Desinger (inclusa no SDK do flutter), todos os componentes do Material que não foram estilizados com o Stardust estão disponiveis nessa lib.

Libraries

stardust