Geek Snipe

AppwriteのWebサイトのナビバーの作成

このブログは読むのにとても長いので、すべての内容をまとめて動画にし、GitHubにすべてのコードを提供しました。チェックしてみてください。

GitHub: https://github.com/raman04-byte/appwrite_webpage

動画: https://youtu.be/aW6firJJxSU

このブログでは、Appwriteのナビゲーションバーを作成する方法をご紹介します。

画像説明

このプロジェクト全体でMVCアーキテクチャに従います。

まず、MVCアーキテクチャについて話し、それが何かを知りましょう：

MVC（Model-View-Controller）は、アプリケーションの懸念をモデル、ビュー、コントローラの3つの独立したコンポーネントに分ける、ソフトウェア開発で使用される一般的なアーキテクチャパターンです。Flutterは主に「Flutter方式」のアーキテクチャ（MVVMパターンに似ています）を推進しますが、プロジェクトの要件や設計原則に沿っている場合、MVC構造を実装することができます。

ここでは、FlutterでMVCアーキテクチャを適用する方法について簡単な説明をします。

モデル（M）：

モデルは、アプリケーションのデータとビジネスロジックを表します。データの保存、取得、操作を担当します。

Flutterアプリでは、データモデルを定義するためにDartクラスを作成できます。これらのクラスは、ユーザープロファイル、ショッピングカート内の商品、またはその他のアプリケーション固有のデータなど、取り扱っているデータを表します。

モデルクラスはUIやユーザーの操作に依存しません。できるだけ独立して再利用可能であるべきです。

ビュー（V）：

ビューはユーザーインターフェース（UI）を描画し、モデルからのデータをユーザーに表示する責任を持ちます。Flutterでは、これは通常ウィジェットを使用して行います。

Flutterアプリの各画面やページは、UIのレイアウトとデザインを含む独自のビューコンポーネントを持つことができます。

Text、Image、ListView、カスタムウィジェットなどのウィジェットを使用して、アプリの画面を視覚的に表現することができます。

コントローラ（C）：

コントローラは、モデルとビューの間で仲介役を果たします。ユーザー入力を処理し、リクエストを処理し、必要に応じてモデルやビューを更新します。

Flutterでは、StatefulWidgetやサードパーティの状態管理ライブラリ（例：Provider、Bloc、Riverpodなど）を使用して、MVCのコントローラー部分を実装することができます。

コントローラは、ユーザーの操作を管理し、入力を検証し、APIコールを行い、必要に応じてモデルやビューを更新することができます。

それでは、このナビバーアプリケーションの開発状態に移りましょう：

まず、pubspec.yamlファイルを見てみましょう：

name: appwrite_web
description: A new Flutter project.

publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: '>=3.1.2 <4.0.0'
  
dependencies:
  flutter:
    sdk: flutter


  cupertino_icons: ^1.0.1
  get: ^4.6.6
  flutter_svg: ^2.0.7
  google_fonts: ^6.1.0
  simple_icons: ^7.10.0
  flutter_switch: ^0.3.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0
flutter:

  uses-material-design: true

  assets:
    - assets/
    - assets/images/
  fonts:
    - family: Inter
      fonts:
        - asset: assets/fonts/Inter-Bold.ttf
        - asset: assets/fonts/Inter-Medium.ttf
        - asset: assets/fonts/Inter-Regular.ttf
        - asset: assets/fonts/Inter-SemiBold.ttf

    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins-Bold.ttf
    - family: SourceCodePro
      fonts:
        - asset: assets/fonts/SourceCodePro-Regular.ttf

フルスクリーンモードを終了します

最新バージョンのパッケージを使用してください。

Appwriteナビゲーションバーの開発中に従うフォルダ構造を確認してみましょう：

画像説明

main.dartファイルを見てみましょう：

import 'package:flutter/material.dart';

import 'app.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}

フルスクリーンモードを終了します

このコードはFlutterアプリケーションのエントリポイントです。Flutterのウィジェットバインディングを初期化し、適切な初期化を保証します。その後、Appウィジェットをアプリのルートとして実行します。Appウィジェットは、おそらくインポートされたapp.dartファイルで定義されており、アプリのロジックとUIコンポーネントを統合するFlutterアプリケーションのメイン構造として機能します。

app.dartファイルを見てみましょう：

import 'package:appwrite_web/routing/namesroute.dart';
import 'package:appwrite_web/routing/webrounting.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

class App extends StatelessWidget {
  const App({super.key});


  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(fontFamily: GoogleFonts.poppins().fontFamily),
      getPages: WebRouting().getPages(),
      initialRoute: NamesRoutes.home,
    );
  }
}

フルスクリーンモードを終了します

上記のコードは、ステートマネジメントとルーティングのためにGetXパッケージを使用して「App」という名前のFlutterアプリケーションを定義しています。コードの要約は以下の通りです：

インポートステートメント：

appwrite_web、get、およびgoogle_fontsなど、さまざまなFlutterと外部のパッケージがコードにインポートされています。

Appクラス：

これは、Flutterアプリケーションのルートウィジェットを表すStatelessウィジェットです。

buildメソッド：

buildメソッド内でGetMaterialAppウィジェットが作成されます。このウィジェットは、アプリケーションの基本設定を構成するために使用されます。

GetMaterialApp設定：

debugShowCheckedModeBanner: false: アプリ内のデバッグバナーを無効にします。

title: 'Flutter Demo': アプリのタイトルを設定します。

theme: ThemeData(fontFamily: GoogleFonts.poppins().fontFamily): アプリのテーマを定義します。Google Fontsパッケージを使用して、"Poppins"というデフォルトのフォントファミリーをアプリ全体で設定しているようです。

getPages: WebRouting().getPages(): アプリのルートとページを指定します。WebRoutingクラスを使用してルーティング設定を定義しているようです。

initialRoute: NamesRoutes.home: アプリの初期ルートを設定します。NamesRoutesで定義されている"home"ルートを指している可能性があります。

全体として、このコードはGetパッケージを使用して特定のテーマとルーティング設定を持つFlutterアプリを初期化します。ルーティング設定はWebRoutingクラスに基づいており、アプリはNamesRoutesで定義されている"home"ルートから始まります。

Webアプリケーションのルーティングを見てみましょう：

現在一つの画面しかないので、Getパッケージを使用したルーティングコードは以下のようになります：

画像説明

namesroute.dart:

class NamesRoutes {
  static const String home = '/homeScreen';
}

フルスクリーンモードを終了します

webrouting.dart:

import 'package:appwrite_web/feature/home/screen/homepage.dart';
import 'package:appwrite_web/routing/namesroute.dart';
import 'package:get/get.dart';

class WebRouting {
  List<GetPage<dynamic>> getPages() {
    return [
      GetPage(
        name: NamesRoutes.home,
        page: ()=> const HomePage(),
      ),
    ];
  }
}

フルスクリーンモードを終了します

上記のコードは、GetXパッケージを使用してFlutter Webアプリケーションのルーティング設定を定義しています。コードの要約は以下の通りです：

インポートステートメント：

appwrite_web、get、およびルーティングと画面ナビゲーションに関する特定のDartファイルなど、いくつかのパッケージがコードにインポートされています。

WebRoutingクラス：

このクラスは、アプリケーションのルーティング設定を定義する責任を持っています。

getPagesメソッド：

getPagesは、GetPageオブジェクトのリストを返すメソッドです。これらのオブジェクトは、アプリケーションのルートと関連する画面/ページを定義します。

ルート設定：

getPagesメソッド内で、GetPageオブジェクトのリストが作成され、アプリケーションで利用可能なルートを指定します。

提供されたコードには、"home"ルート用の次のルート設定が含まれています：

NamesRoutes.homeを持つGetPage：

name: NamesRoutes.home: ルートに名前を割り当てます。おそらくNamesRoutesファイルで定義されています。

page: () => const HomePage(): "home"ルートに関連付けられたページ/画面を指定します。この場合、HomePageウィジェットを指しており、const（定数）としてマークされています。

全体として、このコードはFlutter Webアプリケーションのルーティング設定を定義し、"home"ルートをHomePageウィジェットに関連付けています。アプリケーション内の異なる部分間でのナビゲーションに必要に応じて、getPagesメソッドにさらにルートとページを追加することができます。

デバイスの性質を動的にする方法を見てみましょう。反応性を持たせることによって：

// ignore_for_file: deprecated_member_use

import 'dart:ui';

import 'package:flutter/material.dart';

class Dimensions {
  static double get screenHeight {
    return WidgetsBinding.instance.window.physicalSize.height /
        window.devicePixelRatio;
  }

  static double get screenWidth {
    return WidgetsBinding.instance.window.physicalSize.width /
        window.devicePixelRatio;
  }

  static double scaleH(double value) {
    return value * ((screenHeight) / 740);
  }

  static double scaleW(double value) {
    return value * ((screenWidth) / 360);
  }
}

フルスクリーンモードを終了します

上記のコードは、Flutterアプリケーション内でスクリーン寸法と値のスケーリングを処理するためのユーティリティ機能を提供するDimensionsというDartクラスを定義します。このコードの要約は以下の通りです：

インポートステートメント：

dart:uiライブラリとpackage:flutter/material.dartをコードがインポートしています。

Dimensionsクラス：

Dimensionsは、アプリケーション内のスクリーン寸法とスケーリングを管理するためのユーティリティクラスです。

screenHeightとscreenWidthプロパティ：

これらは、デバイスのピクセル比を考慮して、それぞれスクリーンの高さと幅を計算する静的なプロパティです。

WidgetsBinding.instance.window.physicalSizeを使ってウィンドウの物理サイズを取得し、window.devicePixelRatioで割ってスクリーン寸法を取得します。

scaleHとscaleWメソッド：

これらは、スクリーン寸法に基づいて値をスケーリングするための静的なメソッドです。

scaleHは、値を入力として取り、スクリーンの高さに基づいて比例してスケーリングします（参照高さとして740が使用されます）。

scaleWは、値を入力として取り、スクリーンの幅に基づいて比例してスケーリングします（参照幅として360が使用されます）。

このユーティリティクラスは、異なるスクリーンサイズと解像度に適応するように、スクリーン寸法に応じて値をスケーリングすることによって、Flutterアプリケーションを反応的にするために使用できます。レイアウト

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/raman04byte/making-the-navbar-of-the-appwrite-website-2c54

タグ

flutterに関連する記事
tutorialに関連する記事
programmingに関連する記事
uiに関連する記事

最新の記事

画像
#failure#digitalocean#kubernetes
Digital OceanのKubernetesチャレンジに失敗
画像
#devops#cybersecurity#infosec#devsecops
ソフトウェア構成分析の実行方法
画像
#svelte#sveltekit#tailwindcss#webdev
TailwindCSSをSvelteKitで使う方法
画像
#javascript#webdev#programming
JavaScriptの「Strict Mode」とは？
画像
#webdev#programming#opensource#architecture
ECサイト内検索を最適化する8つのコツ
画像
#twitter#api#discuss
TwitterのAPI利用に2月9日から課金開始
画像
#javascript#tutorial#node#productivity
自分のCRMをNotionとHazel Baseで自動化する
画像
#owasp#appsec#cryptographic
OWASPトップ2 "暗号的な失敗"を開発者に説明する
画像
#flutter#frontend#beginners#abotwrotethis
Flutterフロントエンド開発者のための要点