Description:

stardust

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
copied to clipboard
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
copied to clipboard
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
),
),
copied to clipboard
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.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter