First contact

Similar to

TensorFlow I will not translate, because those are only outdated notes from a code I can’t access anymore, but different from TensorFlow I want to return my studies with Flutter

Algo privado

Para algo que vai ser apenas usado naquele cara. Exemplo a baixo eu apenas posso usar o widget privado dentro da lib. (ou seja, no outro widget) e as variáveis privadas apenas posso usar dentro do widget/funcão que foi declarada:


import 'package:flutter/material.dart';

import './question.dart';
import 'answers.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  var _questionIndex = 0;

  void _answerQuestion() {
    setState(() {
      _questionIndex = _questionIndex + 1;
    });
    print(_questionIndex);
  }

  @override
  Widget build(BuildContext context) {
    var questions = [
      {
        'questionText': 'What\'s your favorite color?',
        'answers': ['Black', 'Red', 'Green', 'White'],
      },
      {
        'questionText': 'What\'s your favorite animal?',
        'answers': ['Rabbit', 'Snake', 'Elephant', 'Lion'],
      },
      {
        'questionText': 'Who\'s your favorite instructor?',
        'answers': ['Max', 'Max', 'Max', 'Max'],
      },
    ];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Column(
          children: [
            Question(
              questions[_questionIndex]['questionText'],
            ),
            ...(questions[_questionIndex]['answers'] as List<String>)
                .map((answer) {
              return Answer(_answerQuestion, answer);
            }).toList()
          ],
        ),
      ),
    );
  }
}

Const vs Final

const é que não muda em runtime - usado para declarar as var. que não mudam

final é que não muda em tempo de copilação - usado para declarar os parametro de um widget:


class Question extends StatelessWidget {
  final String questionText;

  Question(this.questionText);

  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        margin: EdgeInsets.all(10),
        child: Text(
          questionText,
          style: TextStyle(fontSize: 28),
          textAlign: TextAlign.center,
        ));
  }
}

@required

Para um parâmetro ser obrigatório em uma Widget, precisa do required


class Question extends StatelessWidget {
  final String questionText;

  Question(@required this.questionText);

  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        margin: EdgeInsets.all(10),
        child: Text(
          questionText,
          style: TextStyle(fontSize: 28),
          textAlign: TextAlign.center,
        ));
  }
}

Metodo get

Usado para retornar variaveis com valores dínamico


String get resultPhase {
	if(true) {
     return 'Frase 01'
  }
  return 'Frase 00'
}

Dart Devtools e debug

Nele tem algumas coisas tunadas, como mostrar cada fatia do aplicativo e performance dele.

https://flutter.dev/docs/development/tools/devtools/overview

https://flutter.dev/docs/testing/debugging

Adaptive vs Responsive

Adaptativo é quando tu faz para iOS e Android. Tem que se adaptar com a plataforma.

Responsivo é o cara ter diferente resolução e tamanho de tela e poder usar em horizontal ou vertical o aplicativo

Trabalhando com responsividade

Na imagem a baixo, eu sou deixando o Widget com 20% da altura da tela do usuário

#### Contorando o app bar

Você joga o Appbar (navbar) para uma variavel e passa como contexto para os filhos:

Porém o padding pode ser necessário:

Agora quando você passar o número da altura para algum Container filho, ele vai dar 60% de (100% menos altura do navbar)

Meu primeiro MVP

Figma: