作品集

使用Flutter for Web构建的投资组合。

演示

如何创建和部署

请点击以下链接，了解如何创建和部署Flutter Web应用程序。

如何使用

步骤 1

使用下面的链接下载或克隆此仓库

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

步骤 2

转到项目根目录，在控制台中执行以下命令以获取所需的依赖项

flutter pub get

步骤 3

要将Flutter SDK与flutter_web预览版一起使用，请确保您已通过在计算机上运行flutter upgrade将Flutter升级到至少v1.5.4。请访问以下链接了解如何配置Flutter for Web：https://medium.com/@zubairehman.work/flutter-for-web-c75011a41956

步骤 4

要运行此应用程序，只需键入以下命令

flutter packages pub global run webdev serve

文件夹结构

这是 Flutter 提供的核心文件夹结构。

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

这是我们在此项目中使用的文件夹结构

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

现在，让我们深入 `lib` 文件夹，其中包含应用程序的主要代码。

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.

常量

此目录包含所有应用程序级别的常量。如下面的示例所示，为每种类型创建一个单独的文件

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

UI

此目录包含应用程序的所有UI。每个屏幕都位于一个单独的文件夹中，这样可以轻松地将与特定屏幕相关的文件组合在一起。所有特定于屏幕的小部件都将放置在widgets目录中，如下面的示例所示。

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

Utils

包含项目中使用的通用文件和实用程序。文件夹结构如下

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

小部件

包含跨多个屏幕共享的通用 widget。例如，Button、TextField 等。

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

Main

这是应用程序的起点。所有应用程序级别的配置都在此文件中定义，即主题、路由、标题、方向等。

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

感谢

如果您喜欢我的工作，请不要忘记通过⭐点亮仓库来表达您的支持。

GitHub

查看 Github