Ir para conteúdo
Fluttership
  • Cadastre-se
Alex Castro

Criar um contador do Zero

Recommended Posts

Vamos começar, apagando tudo do arquivo: main.dart

lib/main.dart é onde é colocado o seu código dart

Começamos pela função principal do dart

void main() { }

 

Usando função runApp, iremos dizer o que irá executar no nosso dispositivo android / iOS.

 

void main() { runApp(); }

Dentro do runApp, vamos chamar o Material do Dart (parece um pouco jQuery, quando faz uma função callback.

void main() {
  runApp(
      new MaterialApp(
        title: 'Primeiro Projeto',
        home: Container(color: Colors.black45),
      )
  );
}

O materialApp é uma Classe do dart que define alguns componentes de estilização do App. Não sendo obrigatório usá-lo. (https://flutter.dev/docs/development/ui/widgets-intro), Mas no próximo artigo será util já usá-lo, para criar a parte UI do App.

para usar este widget, de acordo com a documentação, você deve importa-los:

import 'package:flutter/material.dart';

void main() {
  runApp(
      new MaterialApp(
        title: 'Primeiro Projeto',
      )
  );
}

Como é nosso App é simples, vamos colocar o container dentro do materialApp mesmo.

Vamos usar mainAxisAlignment, pra alinha nosso texto no centro da tela:

void main() {
  runApp(
      new MaterialApp(
        title: 'Primeiro Projeto',
        home: Column(
          mainAxisAlignment: MainAxisAlignment.center,

        )
      )
  );
}

e dentro do home, colocar nosso container, com o nosso Texto.

void main() {
  runApp(
      new MaterialApp(
        title: 'Primeiro Projeto',
        home: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Contador: 0",
              style: TextStyle(color: Colors.white),
            )
          ],
        )
      )
  );
}

 

 

1*bfCUdbO0sRal3qLxaJVGFQ.jpeg

 

Podemos ver nosso App neste estado, agora podemos criar o botão para acrescentar este valor.

Neste exemplo, iremos criar um botão Flatbutton, que é uma classe do Dart( https://api.flutter.dev/flutter/material/FlatButton-class.html)

  • child: Damos um texto para o botão com a const Text.
  • color: Cor do fundo do botão
  • splashColor: é a cor da animação quando é clicado no botão. ( no css, usa :active)
  • onPressed: é a ação do botão.

Antes de fazer nosso botão funcionar, é bom lembrar de uma nota:

Widget Stateful são classes que podem ser alteradas, conforme for interagindo com o App. e Stateless, é exatamente o oposto. Widgets que são sempre aquilo, não é alterado. Mas vamos aprender na prática:

Vamos criar a Classe Home:

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Esse build é exatamente para podermos alterar o status do nosso contador (ou do layout)

Vamos colocar nosso container que está em home lá de cima e colocar no return da classe HomeState, e chamar essa classe dentro do nosso runApp:

import 'package:flutter/material.dart';

void main() {
  runApp(
      new MaterialApp(
        title: 'Primeiro Projeto',
        home: Home(),
      )
  );
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int contagem = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          "Contador: $contagem",
          style: TextStyle(color: Colors.white),
        ),
          FlatButton(
            child: const Text('Somar'),
            color: Colors.white,
            splashColor: Colors.black12,
            onPressed: () {
            setState(() {
              contagem++; 
            });
          },
        ),
      ],
    );
  }
}

Deste Modo, temos uma idéia do como é feito a interação do botão com a aplicação.

Link do projeto: https://github.com/AlexcastroDev/contador/

Gostou ? Compartilhe!

Teve algum ponto que precisou de ser mais claro? Dê seu feedback para que eu possa preparar conteúdo melhores para a comunidade.

 

  • Haha 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Criar Novo...