Portfolio Demo 1

Portefeuille

Une construction de portefeuille en utilisant Flutter pour le Web.

Démo

Comment créer et déployer

Suivez les liens ci-dessous pour en savoir plus sur la façon de créer et de déployer des applications Web dans Flutter.

• Flutter pour le Web: un guide complet pour créer et exécuter une application Web

• Flutter pour le Web: un guide complet pour déployer une application Web

Comment utiliser

Étape 1:

Téléchargez ou clonez ce dépôt en utilisant le lien ci-dessous:

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

Étape 2:

Allez dans Root du projet et exécutez la commande suivante dans la console pour obtenir les dépendances requises:

 flutter pub get 

Étape 3:

Pour utiliser le SDK Flutter avec l'aperçu FLUTTER_WEB, assurez-vous d'avoir mis à niveau Flutter vers au moins V1.5.4 en exécutant la mise à niveau de Flutter depuis votre machine. Suivez le lien pour en savoir plus sur la configuration de Flutter pour le Web: https://medium.com/@zubairehman.work/flutter-for-web-c75011a41956

Étape 4:

Pour exécuter cette application, tapez simplement la commande suivante:

 flutter packages pub global run webdev serve

Structure de dossier

Voici la structure du dossier central que Flutter fournit.

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

Voici la structure du dossier que nous utilisons dans ce projet

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

Maintenant, plongeons dans le dossier Lib qui a le code principal de l'application.

 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

Ce répertoire contient toutes les constantes de niveau d'application. Un fichier séparé est créé pour chaque type comme indiqué dans l'exemple ci-dessous:

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

Ui

Ce répertoire contient toute l'interface utilisateur de votre application. Chaque écran est situé dans un dossier séparé, ce qui facilite la combinaison du groupe de fichiers liés à cet écran particulier. Tous les widgets spécifiques à l'écran seront placés dans le répertoire widgets comme indiqué dans l'exemple ci-dessous:

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

Utils

Contient le ou les fichiers communs et les utilitaires utilisés dans un projet. La structure du dossier est la suivante:

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

Widgets

Contient les widgets communs partagés sur plusieurs écrans. Par exemple, Button, TextField, etc.

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

Principal

Ceci est le point de départ de l'application. Toutes les configurations de niveau d'application sont définies dans ce fichier, c'est-à-dire le thème, les routes, le titre, l'orientation, 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();
  }
}

Merci

Si vous avez aimé mon travail, n'oubliez pas de jouer le dépôt pour montrer votre soutien.