Portfolio Demo 1

Portfolio

Ein Portfolio -Build mit Flutter für Web.

Demo

Erstellen und Bereitstellen

Folgen Sie den folgenden Links, um mehr darüber zu erfahren, wie Webanwendungen in Flutter erstellt und bereitgestellt werden.

• Flutter für Web: Eine vollständige Anleitung zum Erstellen und Ausführen einer Webanwendung

• Flutter für Web: Eine vollständige Anleitung zum Bereitstellen einer Webanwendung

Wie man benutzt

Schritt 1:

Laden Sie diesen Repo mit oder klonen Sie mit dem folgenden Link:

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

Schritt 2:

Gehen Sie zu Project Root und führen Sie den folgenden Befehl in der Konsole aus, um die erforderlichen Abhängigkeiten zu erhalten:

 flutter pub get 

Schritt 3:

Um das Flutter SDK mit der Vorschau von Flutter_Web zu verwenden, stellen Sie sicher, dass Sie Flutter auf mindestens v1.5.4 durch Ausführen von Flutter -Upgrade von Ihrer Maschine aktualisiert haben. Folgen Sie dem Link, um mehr darüber zu erfahren

Schritt 4:

Um diese Anwendung auszuführen, geben Sie einfach den folgenden Befehl ein:

 flutter packages pub global run webdev serve

Ordnerstruktur

Hier ist die Kernordnerstruktur, die Flutter bietet.

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

Hier ist die Ordnerstruktur, die wir in diesem Projekt verwendet haben

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

Lassen Sie uns nun in den Lib -Ordner eintauchen, der den Hauptcode für die Anwendung enthält.

 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.

Konstanten

Dieses Verzeichnis enthält alle Konstanten der Anwendungsebene. Für jeden Typ wird eine separate Datei erstellt, wie in Beispiel unten gezeigt:

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

Ui

Dieses Verzeichnis enthält die gesamte Benutzeroberfläche Ihrer Bewerbung. Jeder Bildschirm befindet sich in einem separaten Ordner, sodass die Gruppe von Dateien, die sich auf diesen bestimmten Bildschirm beziehen, einfach zu kombinieren. Alle Bildschirmspezifischen Widgets werden in widgets -Verzeichnis platziert, wie im folgenden Beispiel gezeigt:

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

Utils

Enthält die in einem Projekt verwendeten gemeinsamen Dateien und Dienstprogramme. Die Ordnerstruktur lautet wie folgt:

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

Widgets

Enthält die gemeinsamen Widgets, die über mehrere Bildschirme geteilt werden. Zum Beispiel Schaltfläche, Textfeld usw.

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

Hauptsächlich

Dies ist der Ausgangspunkt der Anwendung. Alle Konfigurationen der Anwendungsebene sind in dieser Datei definiert, dh, Thema, Routen, Titel, Orientierung usw.

 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();
  }
}

Danke

Wenn Ihnen meine Arbeit gefallen hat, vergessen Sie nicht, das Repo zu spielen, um Ihre Unterstützung zu zeigen.