A Flutter project to manage bank slip

by Flutter Awesome

payflow_app

A Flutter project to manage bank slip

Getting Started

Start project in cmd: flutter create application_name – create app code application_name – open vscode

Parts of creation

  1. Define Theme (color, images, font)
  2. Create Screens

How to know the size of cellphone

final size = MediaQuery.of(context).size;

  • use example: Container( width: size.width, height: size.height * 0.40 – takes up 40% of the screen )

How add delay (wait especific time):

await Future.delayed(Duration(seconds: 2));

How add border in Container

decoration: BoxDecoration( borderRadius: BorderRadius.circular(5), border: Border.fromBorderSide(BorderSide(color: Colors.grey)) ),

News Widgets

InkWell – it’s iqual GestureDetector but have a effect when tap Positioned – put the widget where you want ex: Positioned( top: 35, left: 0, right: 0, child: Image.asset(AppImages.person) ), PreferredSize – add size in appBar ex: appBar: PreferredSize( preferredSize: const Size.fromHeight(128), child: … ), Text.rich + TextSpan – add diferents fontStyles at text ex: Text.rich( TextSpan( text: “Olá, “, style: AppTextStyles.titleListTile, children: [ TextSpan( text: “Caroline”, style: AppTextStyles.titleBoldBackground ) ] ), ) RotatedBox – deixa a tela em vertical – rotaciona 90* ex: return SafeArea( top: true, bottom: true, left: true, right: true, child: RotatedBox( quarterTurns: 1, child: Scaffold

ATALHOS

shift + alt + f – indenta o código

ERROS

JAVA_HOME is not set and no ‘java’ command could be found in your PATH – to solve, watch this video https://www.youtube.com/watch?v=Sbic3aMCwhY

Como configurar o firebase no projeto:

  1. Fazer processo de instalação
  2. Adicionar no pubspec.yaml o firebase_core
  3. Inicializar o firebase – inicialização está na classe AppFirebase (main.dart)
  4. Adicionar no pubspec.yaml o google_sign_in
  5. Firebase > authentication > sign-in method adicionar o google como provedor de login
  6. Criar classes de loginController (utiliza os métodos do google_sign_in para logar o usuário) e authController (verifica se o usuário já existe, se sim direciona para a tela home e se não, mantem na tela de login)
  7. Instanciar LoginController e chamar ela quando clicar no botão

Como utilizar SharedPreferences:

  1. Adicionar pacote shared_preferences no pubspec.yaml
  2. Na classe de autenticação AuthController, adicionar métodos saveUser (salva o usuário) e currentUser (verifica se esse usuário já logou no app, se já tiver logado não vai passar na tela de login)
  3. Criar UserModel – essa model terá as informações do usuário e os métodos para converter os dados em Map, Json ou String – essas conversões são muito importantes, pois sem elas a AuthController não funciona corretamente
  4. Na tela de splash, instanciar a classe e chamar o método currentUser. obs: as principais classes que fazem tudo acontecer é a UserModel e a AuthController

Como adicionar rotas nomeadas ao projeto

  1. No main, adicionar routes (todas as telas de seu app) e initialRoute (tela inicial) return MaterialApp( title: “Pay Flow”, initialRoute: “/home”, routes: { “/splash”: (context) => const SplashPage(), “/login”: (context) => const LoginPage(), “/home”: (context) => const HomePage(), } );
  2. No momento de navegar entre as telas, você vai chamá-las da seguinte forma: Navigator.pushNamed(context, “/login”);

GitHub

View Github