Portfolio Demo 1

Портфель

Сборка портфеля с помощью Flutter для Интернета.

Демо

Как создать и развернуть

Перейдите по ссылкам ниже, чтобы узнать больше о том, как создавать и развернуть веб -приложения в Flutter.

• Flutter for Web: полное руководство по созданию и запуска веб -приложения

• Flutter for Web: полное руководство по развертыванию веб -приложения

Как использовать

Шаг 1:

Загрузите или клонируйте это репо, используя ссылку ниже:

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

Шаг 2:

Перейдите в Project Root и выполните следующую команду в консоли, чтобы получить необходимые зависимости:

 flutter pub get 

Шаг 3:

Чтобы использовать Flutter SDK с предварительным просмотром Flutter_Web, убедитесь, что у вас есть обновленная Flutter не менее V1.5.4, запустив обновление Flutter с вашей машины. Перейдите по ссылке, чтобы узнать больше о том, как настроить Flutter для Интернета: 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

Этот каталог содержит весь пользовательский интерфейс вашего приложения. Каждый экран расположен в отдельной папке, что позволяет легко объединить группу файлов, связанных с этим конкретным экраном. Все специфичные для экрана виджеты будут размещены в каталоге widgets как показано в приведенном ниже примере:

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

Утилит

Содержит общие файлы (ы) и утилиты, используемые в проекте. Структура папки следующая:

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

Виджеты

Содержит общие виджеты, которые разделяются на нескольких экранах. Например, кнопка, текстовое поле и т. Д.

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

Основной

Это отправная точка приложения. Все конфигурации уровня приложений определены в этом файле, т.е., тема, маршруты, заголовок, ориентация и т. Д.

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

Спасибо

Если вам понравилась моя работа, не забудьте снять репо, чтобы показать вашу поддержку.