Portfolio Demo 1

Cartera

Una construcción de cartera utilizando Flutter for Web.

Manifestación

Cómo crear e implementar

Siga los enlaces a continuación para obtener más información sobre cómo crear e implementar aplicaciones web en Flutter.

• Flutter for Web: una guía completa para crear y ejecutar una aplicación web

• Flutter for Web: una guía completa para implementar una aplicación web

Cómo usar

Paso 1:

Descargue o clone este repositorio utilizando el siguiente enlace:

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

Paso 2:

Vaya a Project Root y ejecute el siguiente comando en la consola para obtener las dependencias requeridas:

 flutter pub get 

Paso 3:

Para usar el SDK Flutter con la vista previa Flutter_Web, asegúrese de haber actualizado Flutter a al menos V1.5.4 ejecutando la actualización de Flutter desde su máquina. Siga el enlace para obtener más información sobre cómo configurar Flutter para la web: https://medium.com/@zubairehman.work/flutter-for-web-c75011a41956

Paso 4:

Para ejecutar esta aplicación, simplemente escriba el siguiente comando:

 flutter packages pub global run webdev serve

Estructura de carpetas

Aquí está la estructura de carpeta central que proporciona Flutter.

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

Aquí está la estructura de la carpeta que hemos estado utilizando en este proyecto.

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

Ahora, vamos a sumergirnos en la carpeta LIB que tiene el código principal para la aplicación.

 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 directorio contiene todas las constantes de nivel de aplicación. Se crea un archivo separado para cada tipo como se muestra en el ejemplo a continuación:

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

Ui

Este directorio contiene toda la interfaz de usuario de su aplicación. Cada pantalla se encuentra en una carpeta separada, lo que hace que sea fácil combinar un grupo de archivos relacionados con esa pantalla en particular. Todos los widgets específicos de la pantalla se colocarán en el directorio widgets como se muestra en el ejemplo a continuación:

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

Tensiones

Contiene los archivos y utilidades comunes utilizados en un proyecto. La estructura de la carpeta es la siguiente:

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

Widgets

Contiene los widgets comunes que se comparten en múltiples pantallas. Por ejemplo, botón, Textfield, etc.

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

Principal

Este es el punto de partida de la aplicación. Todas las configuraciones de nivel de aplicación se definen en este archivo, es decir, tema, rutas, título, orientación, 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();
  }
}

Gracias

Si te gustó mi trabajo, no olvides protagonizar el repositorio para mostrar tu apoyo.