Ui Dev tools components

components_ui_devtools

A ideia principal é a componentização de widgets. Ou seja, os widgets mais usados do nosso desenvolvimento estaram de forma simples e dinamica para qualquer aplicação.

Primeiros passos

Adicione ao seu pubspec.yaml o pacote


-- flutter pub add components_ui_devtools

ou no seu pubspec cole:
-components_ui:
---git:
-----url: https://github.com/davi-oliver/components_ui

No seu projeto

import 'package:components_ui/src/kit_buttons.dart';

Requests Components

As requisições é feitas atraves do pacote http. O intuito é fazer com que a requisição possa retornar todo o status, data e exceptions que possa ter durante o acesso. A forma escolhida para receber essas informações é feita atraves de json.

var _data = {
        "requisicao_url": "$_url",
        "tipo_requisicao": "GET",
        "status_code": "${_requestGet.statusCode}",
        "conexao": "$_resultConexao",
        "mensagem": "Sucesso",
        "retorno": "$_body",
      };

Nesse exemplo temos o data de uma requisição GET.

Métodos de requisição

A classe suporta os metodos HTTP como, GET/POST/PUT.

Implementação

A implementação não foge do conceito basico de requisição http do pacote http, disponivel no pub.dev
await http.get(Uri.parse(_url)); // deve ser informado a url onde deseja-se requisitar OBS: método GET usuado para exemplificar

Como utilizar

a utilização é simples, uma vez que importado o pacote, chame RequestComponents().metodo(); veja:

 Future searchVideo() async {
    var res = await RequestsComponents().getComParametros(
        url: "https://www.googleapis.com/youtube/v3/search?",
        param: "part=snippet&q=Jay%20Chou%20Mojito&key=[YOUR_API_KEY]");

    var decodeDados = jsonDecode(res[0]);

  }

para mais informações sobre esta classe: Ctrl + clique esquerdo sobre o nome da classe

UI Components & UX Desing

KitButtons()

Para as nossas classes de UI Kits usamos parametros que são objetivos para cada tipo de Widget. Na classe KitButton temos:
- 'onTap' : que espera uma função,
- 'decoration': espera um BoxDecoration(),
- 'paddingButton': padding do botão,
- 'margingButton': margin do botão,
- 'heigth' & 'width': define o tamanho do botão,
- 'iconSufix'& 'iconPrefix': espera um Widget Icon(),
- 'iconPadding': espaçamento do icone,
- 'spaceIcons': é o espaçamento do icone em relação a um outro widget que esta na mesma linha, um iconSufix por exemplo;
- 'textStyle': estilização de texto,

		 KitButton(
                      width: MediaQuery.of(context).size.width * .8,
                      height: MediaQuery.of(context).size.height * .08,
                      widgetCenter: Text(
                        'Clique aqui',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.w300,
                            fontSize: 25),
                      ),
                      decorationButton: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.green[700]),
                      onTap: () async {
           
                      },
                    ),