Un portefeuille construit en utilisant flutter pour le web

Un portefeuille construit 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 création et le déploiement d’applications Web dans Flutter.

Comment utiliser

Étape 1:

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

Étape 2:

Accédez à la racine du projet et exécutez la commande suivante dans la console pour obtenir les dépendances requises :

Étape 3:

Pour utiliser le SDK Flutter avec l’aperçu flutter_web, assurez-vous d’avoir mis à niveau Flutter vers au moins la v1.5.4 en exécutant la mise à niveau de Flutter depuis votre ordinateur. Suivez le lien pour en savoir plus sur la configuration de Flutter pour le Web :

Étape 4:

Pour lancer cette application tapez simplement la commande suivante :

flutter packages pub global run webdev serve

Structure des dossiers

Voici la structure de dossier de base fournie par Flutter.

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

Voici la structure de dossiers que nous avons utilisée dans ce projet

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

Maintenant, plongeons dans le dossier lib qui contient 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 application. Un fichier séparé est créé pour chaque type, comme illustré dans l’exemple ci-dessous :

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

interface utilisateur

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

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

Utilitaires

Contient le(s) fichier(s) et utilitaires communs utilisés dans un projet. La structure du dossier est la suivante :

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

Widget

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

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

Principal

C’est le point de départ de l’application. Toutes les configurations au niveau de l’application sont définies dans ce fichier, c’est-à-dire le thème, les itinéraires, 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();
  }
}

Si vous avez aimé mon travail, n’oubliez pas de ⭐ mettre en vedette le référentiel pour montrer votre soutien.