Portfolio Demo 1 Unduh - Portfolio Demo 1 Download Kode Sumber

Portfolio Demo 1

Data situs web

1.0.0

Unduh

Portofolio

Portofolio dibangun dengan menggunakan flutter untuk web.

Demo

Cara membuat dan menggunakan

Ikuti tautan di bawah ini untuk mempelajari lebih lanjut tentang cara membuat dan menggunakan aplikasi web di Flutter.

Flutter for Web: Panduan lengkap untuk membuat & menjalankan aplikasi web
Flutter for Web: Panduan lengkap untuk menggunakan aplikasi web

Cara menggunakan

Langkah 1:

Unduh atau klon repo ini dengan menggunakan tautan di bawah ini:

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

Langkah 2:

Pergi ke root proyek dan jalankan perintah berikut di konsol untuk mendapatkan dependensi yang diperlukan:

 flutter pub get

Langkah 3:

Untuk menggunakan SDK Flutter dengan pratinjau Flutter_Web, pastikan Anda telah meningkatkan Flutter ke setidaknya V1.5.4 dengan menjalankan peningkatan flutter dari mesin Anda. Ikuti tautan untuk mempelajari lebih lanjut tentang cara mengkonfigurasi flutter untuk web: https://medium.com/@zubairehman.work/flutter-for-web-c75011a41956

Langkah 4:

Untuk menjalankan aplikasi ini cukup ketik perintah berikut:

 flutter packages pub global run webdev serve

Struktur folder

Berikut adalah struktur folder inti yang disediakan Flutter.

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

Inilah struktur folder yang telah kami gunakan dalam proyek ini

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

Sekarang, mari selami folder lib yang memiliki kode utama untuk aplikasi.

 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.

Konstanta

Direktori ini berisi semua konstanta level aplikasi. File terpisah dibuat untuk setiap jenis seperti yang ditunjukkan pada contoh di bawah ini:

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

Ui

Direktori ini berisi semua UI aplikasi Anda. Setiap layar terletak di folder terpisah yang membuatnya mudah untuk menggabungkan grup file yang terkait dengan layar tertentu. Semua widget spesifik layar akan ditempatkan di direktori widgets seperti yang ditunjukkan pada contoh di bawah ini:

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

Utils

Berisi file umum dan utilitas yang digunakan dalam suatu proyek. Struktur folder adalah sebagai berikut:

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

Widget

Berisi widget umum yang dibagikan di beberapa layar. Misalnya, tombol, TextField dll.

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

Utama

Ini adalah titik awal aplikasi. Semua konfigurasi level aplikasi didefinisikan dalam file ini IE, tema, rute, judul, orientasi dll.

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