Curso Flutter | Aula 4 | Hello World em Flutter com Android Studio

Olá Flutterianos! Na aula passada nós preparamos o ambiente para começarmos a trabalhar. Hoje iremos criar o nosso primeiro aplicativo em Flutter! Alegremo-nos! Hip-Hip-Hurra! Vamos lá. Se você instalou corretamente os plugins falados na aula sobre instalação do Flutter e preparação do ambiente, abra o seu Android Studio e clique na opção "Start a new Flutter project".

Selecione a opção Flutter Application e clique em next. Coloque no Project name o nome "hello_flutter". Coloque o caminho do SDK: C:\src\flutter. A tela ficará como a seguir:

A seguir, deixe os valores padrão, pode dar next e finish. Com o seu celular conectado, tente rodar a aplicação de demonstração padrão. Clique na seta pra direita que fica no topo superior direito da IDE, chamada de Run 'main.dart' ou pressione Shift + F10. Se der algum problema relacionado a dependência do "lint-gradle-api-26.1.2.jar", sugiro que você leia o tópico "couldn't locate lint-gradle-api-26.1.2.jar for flutter project" no stackoverflow. Cheguei a ter problema com essa dependência e, por isso, segui o que estava dito no stackoverflow, ou seja, coloquei a informação do maven em cima de jcenter() no arquivo C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle:

maven {
    url 'https://dl.google.com/dl/android/maven2'
}
jcenter() 

Se tudo der certo, você verá o hello world do Flutter rodando em seu celular. Clique no floating button (botão redondo com o + no centro) para ver o número do centro da tela sendo incrementado.

Agora vamos analisar o código para entendermos o que está acontecendo. A seguir vemos o código de Hello World gerado automaticamente pelo Flutter.

	import 'package:flutter/material.dart';
	void main() => runApp(new MyApp());
	class MyApp extends StatelessWidget {
	// This widget is the root of your application.
	@override
	Widget build(BuildContext context) {
	return new MaterialApp(
	title: 'Flutter Demo',
	theme: new ThemeData(
	// This is the theme of your application.
	//
	// Try running your application with "flutter run". You'll see the
	// application has a blue toolbar. Then, without quitting the app, try
	// changing the primarySwatch below to Colors.green and then invoke
	// "hot reload" (press "r" in the console where you ran "flutter run",
	// or press Run > Flutter Hot Reload in IntelliJ). Notice that the
	// counter didn't reset back to zero; the application is not restarted.
	primarySwatch: Colors.blue,
	),
	home: new MyHomePage(title: 'Flutter Demo Home Page'),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	MyHomePage({Key key, this.title}) : super(key: key);
	// This widget is the home page of your application. It is stateful, meaning
	// that it has a State object (defined below) that contains fields that affect
	// how it looks.
	// This class is the configuration for the state. It holds the values (in this
	// case the title) provided by the parent (in this case the App widget) and
	// used by the build method of the State. Fields in a Widget subclass are
	// always marked "final".
	final String title;
	@override
	_MyHomePageState createState() => new _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	int _counter = 0;
	void _incrementCounter() {
	setState(() {
	// This call to setState tells the Flutter framework that something has
	// changed in this State, which causes it to rerun the build method below
	// so that the display can reflect the updated values. If we changed
	// _counter without calling setState(), then the build method would not be
	// called again, and so nothing would appear to happen.
	_counter++;
	});
	}
	@override
	Widget build(BuildContext context) {
	// This method is rerun every time setState is called, for instance as done
	// by the _incrementCounter method above.
	//
	// The Flutter framework has been optimized to make rerunning build methods
	// fast, so that you can just rebuild anything that needs updating rather
	// than having to individually change instances of widgets.
	return new Scaffold(
	appBar: new AppBar(
	// Here we take the value from the MyHomePage object that was created by
	// the App.build method, and use it to set our appbar title.
	title: new Text(widget.title),
	),
	body: new Center(
	// Center is a layout widget. It takes a single child and positions it
	// in the middle of the parent.
	child: new Column(
	// Column is also layout widget. It takes a list of children and
	// arranges them vertically. By default, it sizes itself to fit its
	// children horizontally, and tries to be as tall as its parent.
	//
	// Invoke "debug paint" (press "p" in the console where you ran
	// "flutter run", or select "Toggle Debug Paint" from the Flutter tool
	// window in IntelliJ) to see the wireframe for each widget.
	//
	// Column has various properties to control how it sizes itself and
	// how it positions its children. Here we use mainAxisAlignment to
	// center the children vertically; the main axis here is the vertical
	// axis because Columns are vertical (the cross axis would be
	// horizontal).
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	new Text(
	'You have pushed the button this many times:',
	),
	new Text(
	'$_counter',
	style: Theme.of(context).textTheme.display1,
	),
	],
	),
	),
	floatingActionButton: new FloatingActionButton(
	onPressed: _incrementCounter,
	tooltip: 'Increment',
	child: new Icon(Icons.add),
	), // This trailing comma makes auto-formatting nicer for build methods.
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

Você pode ver também a análise desse código no artigo "Destrinchando Flutter - Entendendo a estrutura e começando a programar" do Diego Dias no site FlutterBrasil. Vou fazer aqui a minha análise. Na linha 1 temos o código que importa os widgets do Flutter que foram desenhados no padrão Material Design, que é o padrão oficial que a Google usa e recomenda para o sistema Android, mas que também é utilizado na web. Na linha número 3 temos a função main(), que é a função de entrada no código. O seu código será iniciado por ela. Usa-se o runApp() para rodar o aplicativo. A linha 3 poderia ser reescrita de uma maneira mais tradicional, sem usar arrow function, da seguinte maneira:

void main() {
  runApp(new MyApp());
}

Precisamos entender agora a diferença entre um StatelessWidget e StatefulWidget. A grosso modo um StatelessWidget não mantém um estado, logo é estático e imutável durante a execução do código, logo, não é executado durante o hot reload do Flutter. Já o StatefulWidget é um widget que mantém um estado, que pode ir sendo modificado durante a execução da aplicação. Utilizando o mesmo exemplo dado pelo Diego Dias em seu texto "Destrinchando Flutter - Entendendo a estrutura e começando a programar", podemos citar o caso de um carrinho de compras. É necessário manter os produtos que foram comprados a medida em que se faz compra, logo, seria um StatefulWidget, que manteria o estado atual da compra.

Na linha 5 foi criada uma classe chamada MyApp que se torna um StatelessWidget por meio da herança. MyApp é a raiz dos widgets da aplicação, pois foi a classe utilizada dentro de runApp(). Logo em seguida se sobrescreve o método build do StatelessWidget para podermos customizá-lo. É esse método que trata de modificar o app. No caso, ele irá retornar um MaterialApp, que é um Widget que segue o padrão do Material Design. Resumindo, o método build está dizendo o seguinte: crie um widget com o título 'Flutter Demo', que tenha um tema cuja cor primária seja azul e que tenha como widget inicial o MyHomePage.

Os parâmetros dos construtores que são explicitamente informados, como title, theme, primarySwatch, são parâmetros facultativos. Em Dart, parâmetros facultativos precisam ser explicitamente escritos no momento de chamar o método ou o construtor. Aqui também é um bom momento de testar o hot reload do Flutter. Troque o "Colors.blue" da linha 20 por outra, como "Colors.black" e rode usando o hot reload para você ver que o Flutter faz a alteração rapidamente.

Vou ficando por aqui. Na próxima aula iremos analisar o restante do código. Até mais!