Criação de um projeto

Neste vídeo veremos como criar um projeto Flutter a partir do Visual Studio Code.

Configuração do Android Studio

Neste segundo vídeo veremos como configurar um emulador android para nosso projeto Flutter.

Abrir emulador no VSCode

Neste terceiro vídeo veremos como executar nosso projeto a partir do Visual Studio Code com nosso emulador

Criar uma AppBar

Neste vídeo veremos como criar o AppBar. 
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return const MaterialApp(
      home:RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}


class _RootPageState extends State<RootPage>{
  @override
  Widget build(BuildContext context){
    return const Scaffold();   
  }
}

Adicionar um botão

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My First App')
      )
    );
  }
}

Criar um menu

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My First App')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint('Button pressed');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Criar páginas e adicionar imagens

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My First App')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint('Button pressed');
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        destinations: const[
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
        onDestinationSelected: (int index){
          setState((){
            currentPage = index;
          });
        },
        selectedIndex: currentPage,
      ),
    );
  }
}
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget{
  const HomePage({Key? key}) : super(key: key);

  @override 
  Widget build(BuildContext context){
    return Container();
  }
}

Widget - Parte 1

class LearnFlutterPage extends StatefulWidget{
  const LearnFlutterPage({Key? key}) : super(key: key);

  @override 
  State<LearnFlutterPage> createState() => _LearnFlutterPageState();
}


class _LearnFlutterPageState extends State<LearnFlutterPage>{
  @override 
  Widget build(BuildContext context){
    return Container();
  }
}
import 'package:flutter/material.dart';

class LearnFlutterPage extends StatefulWidget {
  const LearnFlutterPage({Key? key}) : super(key: key);

  @override
  State<LearnFlutterPage> createState() => _LearnFlutterPageState();
}

class _LearnFlutterPageState extends State<LearnFlutterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Learn Flutter'),
      ),
      body: Column(
        children: [
          Image.asset('images/Sua_Imagem.jpg')
        ],
      ),
    );
  }
}

Widget - Parte 2

import 'package:flutter/material.dart';

class LearnFlutterPage extends StatefulWidget {
  const LearnFlutterPage({Key? key}) : super(key: key);

  @override
  State<LearnFlutterPage> createState() => _LearnFlutterPageState();
}

class _LearnFlutterPageState extends State<LearnFlutterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Learn Flutter'),
      ),
      body: Column(
        children: [
          Image.asset('images/Inatel.jpg.webp'),
          const SizedBox(height: 10,),
          const Divider(color: Colors.black,),
          Container(
            margin : const EdgeInsets.all(10),
            padding: const EdgeInsets.all(10),
            width: double.infinity,
            color : Colors.blueGrey,
            child: const Center(
              child: Text(
                'This is a text Widget',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Widget - Parte 3

import 'package:flutter/material.dart';

class LearnFlutterPage extends StatefulWidget {
  const LearnFlutterPage({Key? key}) : super(key: key);

  @override
  State<LearnFlutterPage> createState() => _LearnFlutterPageState();
}

class _LearnFlutterPageState extends State<LearnFlutterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Learn Flutter'),
      ),
      body: Column(
        children: [
          Image.asset('images/Inatel.jpg.webp'),
          const SizedBox(height: 10,),
          const Divider(color: Colors.black,),
          Container(
            margin : const EdgeInsets.all(10),
            padding: const EdgeInsets.all(10),
            width: double.infinity,
            color : Colors.blueGrey,
            child: const Center(
              child: Text(
                'This is a text Widget',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25,
                ),
              ),
            ),
          ),
          ElevatedButton(
            onPressed: (){
              debugPrint('ElevatedButton');
            },
            child: const Text('Elevated Button'),
          ),

          OutlinedButton(
            onPressed: (){
              debugPrint('OutlinedButton');
            },
            child: const Text('Outlined Button'),
          ),

          TextButton(
            onPressed: (){
              debugPrint('TextButton');
            },
            child: const Text('Text Button'),
          ),

          GestureDetector(
            onTap: (){
              debugPrint('This is the row');
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: const[
                Icon(
                  Icons.smartphone,
                  color: Colors.blue,
                ),
                Text('Row Widget'),
                Icon(
                  Icons.laptop,
                  color: Colors.blue,
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Nova página através do botão de menu

import 'package:flutter/material.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
import 'package:flutter/material.dart';
import 'package:flutter_application/home_page.dart';


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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My First App')),
      body: const HomePage(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          debugPrint('Button pressed');
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: NavigationBar(
        destinations: const[
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
        onDestinationSelected: (int index){
          setState((){
            currentPage = index;
          });
        },
        selectedIndex: currentPage,
      ),
    );
  }
}