Portfolio Demo 1

Portfólio

Um portfólio construído usando o fletter for web.

Demonstração

Como criar e implantar

Siga os links abaixo para saber mais sobre como criar e implantar aplicativos da Web em Flutter.

• Flutter for Web: um guia completo para criar e executar um aplicativo da web

• Flutter for Web: um guia completo para implantar um aplicativo da web

Como usar

Etapa 1:

Faça o download ou clone este repo usando o link abaixo:

 https://github.com/zubairehman/Portfolio-Demo-1.git

Etapa 2:

Vá para o Project Root e execute o seguinte comando no console para obter as dependências necessárias:

 flutter pub get 

Etapa 3:

Para usar o Flutter SDK com a visualização Flutter_Web, verifique se você atualizou o Flutter para pelo menos v1.5.4 executando a atualização da Flutter na sua máquina. Siga o link para saber mais sobre como configurar o Flutter para a Web: https://medium.com/@zubairehman.work/flutter-for-web-c75011a41956

Etapa 4:

Para executar este aplicativo, basta digitar o seguinte comando:

 flutter packages pub global run webdev serve

Estrutura de pastas

Aqui está a estrutura da pasta principal que o Flutter fornece.

 flutter-app/
|- android
|- build
|- ios
|- lib
|- test

Aqui está a estrutura de pastas que estamos usando neste projeto

 lib/
|- constants/
|- ui/
|- utils/
|- widgets/
|- main.dart

Agora, vamos mergulhar na pasta Lib, que possui o código principal para o aplicativo.

 1- constants - All the application level constants are defined in this directory with-in their respective files. This directory contains the constants for `theme`, `dimentions`, `api endpoints`, `preferences` and `strings`.
2- ui — Contains all the ui of your project, contains sub directory for each screen.
3- util — Contains the utilities/common functions of your application.
4- widgets — Contains the common widgets for your applications. For example, Button, TextField etc.
5- main.dart - This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.

Constantes

Este diretório contém todas as constantes de nível de aplicação. Um arquivo separado é criado para cada tipo, como mostrado no exemplo abaixo:

 constants/
|- assets.dart
|- fonts.dart
|- strings.dart
|- text_styles.dart

Ui

Este diretório contém toda a interface do usuário do seu aplicativo. Cada tela está localizada em uma pasta separada, facilitando a combinação de grupos de arquivos relacionados a essa tela específica. Todos os widgets específicos da tela serão colocados no diretório widgets como mostrado no exemplo abaixo:

 ui/
|- login
   |- login_screen.dart
   |- widgets
      |- login_form.dart
      |- login_button.dart

UTILS

Contém os arquivos comuns e os utilitários usados ​​em um projeto. A estrutura da pasta é a seguinte:

 utils/
|- encryption
   |- xxtea.dart
|- date
  |- date_time.dart

Widgets

Contém os widgets comuns que são compartilhados em várias telas. Por exemplo, botão, campo de texto etc.

 widgets/
|- app_icon_widget.dart
|- empty_app_bar.dart
|- progress_indicator.dart

Principal

Este é o ponto de partida do aplicativo. Todas as configurações de nível de aplicativo são definidas neste arquivo, isto é, tema, rotas, título, orientação etc.

 import 'package:flutter_web/material.dart';
import 'package:portfolio/ui/home.dart';

import 'package:portfolio/utils/screen/screen_utils.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          brightness: Brightness.light,
          primaryColorBrightness: Brightness.light,
          accentColorBrightness: Brightness.light
      ),
      home: MyAppChild(),
    );
  }
}

class MyAppChild extends StatefulWidget {

  @override
  _MyAppChildState createState() => _MyAppChildState();
}

class _MyAppChildState extends State<MyAppChild> {
  @override
  Widget build(BuildContext context) {
    // instantiating ScreenUtil singleton instance, as this will be used throughout
    // the app to get screen size and other stuff
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    return HomePage();
  }
}

Obrigado

Se você gostou do meu trabalho, não se esqueça de estrelar o repositório para mostrar seu apoio.