piiicks ecommerce

ピーイクス

Piiicks は、クリーンなアーキテクチャで細心の注意を払って作成され、効率的な BLoC 状態管理によって強化され、スケーラビリティ、保守性、最適なパフォーマンスを保証する Flutter e-commerce アプリです。オンライン ショッピングの体験を向上させるために設計された洗練されたインターフェイスと堅牢な機能を備えたシームレスなコーディング エクスペリエンスを体験してください。

ディレクトリ構造。

• ライブラリ
  • main.dart:アプリケーションのエントリ ポイント。
  • application ──blocs/cubits:アプリケーションの状態の管理を担当する BLoC (ビジネス ロジック コンポーネント) または Cubit クラスを格納します。
  • core:アプリケーション全体で共有されるコア機能とユーティリティが含まれます。
  • configs:プロジェクトの構成ファイルを保持します。
  • di:依存関係とサービスを管理するための依存関係注入セットアップ。
  • データ:データ ソース、リポジトリ、データ モデルを管理します。
  • ドメイン:ドメイン エンティティ、ユース ケース、およびインターフェイスを定義します。
  • プレゼンテーション ── 画面/ウィジェット:アプリケーションの UI コンポーネント、画面、ウィジェットが含まれます。

特徴

1. クリーンなアーキテクチャ:長期的な保守性を実現するモジュール式でスケーラブルなアーキテクチャを確保します。
2. BLoC 状態管理:スムーズで予測可能なユーザー エクスペリエンスを実現する効率的な状態管理。

ユーザーインターフェース

3. 製品画面:簡単に閲覧できるユーザーフレンドリーな製品表示。
4. カテゴリ:さまざまな製品カテゴリ間のシームレスなナビゲーション。
5. 製品の詳細:製品を包括的に理解するための詳細な情報。
6. 検索機能:迅速な製品発見のための堅牢な検索機能。
7. 検索結果:ユーザーの利便性を考慮した、明確で関連性の高い検索結果。
8. ホーム画面:注目の製品とカテゴリの魅力的なショーケース。
9. フィルター オプション:カスタマイズされたショッピング エクスペリエンスのための直観的な製品フィルター オプション。
10. スプラッシュ スクリーン:アプリのトーンを決定する魅力的な初期読み込み画面。
11. 住所:ユーザーの住所を簡単に管理および編集できるため、注文処理がスムーズになります。
12. ページネーション:ページネーションを実装すると、大量のデータ セットを効率的に読み込むことができ、よりスムーズなユーザー エクスペリエンスが保証されます。

ユーザーインタラクション

13. 製品の並べ替え:価格などの基準に基づいて製品を並べ替えるオプション。
14. 通知:注文ステータスなどの最新情報をユーザーに知らせます。

ユーザー管理

15. ログイン/サインアップ:パーソナライズされたエクスペリエンスのための安全なユーザー認証。
16. ショッピング カート:購入前に選択したアイテムをシームレスかつ直感的に管理します。
17. ユーザー プロファイル:住所の管理、注文履歴の表示、および設定のパーソナライズのための専用セクション。
18. 注文管理:ユーザーが注文を行い、注文ステータスに基づいて異なる注文結果画面を表示できるようにします。

追加機能

19. イメージのキャッシュと読み込みの最適化:ネットワーク イメージの読み込みとキャッシュを効率的に行うために、 cached_network_imageパッケージを利用し、パフォーマンスを向上させます。
20. SVG サポート: flutter_svgパッケージを利用して SVG 画像をサポートし、スケーラブルで鮮明なユーザー インターフェイスを提供します。
21. データ キャッシュ: shared_preferencesパッケージを使用して少量のデータをキャッシュし、特定の状態を維持することでユーザー エクスペリエンスを向上させます。
22. 認証と安全なストレージ: flutter_secure_storageパッケージを使用して安全なユーザー認証を実装し、機密性の高いユーザー データが安全に保存されるようにします。
23. シマー エフェクトを備えたステートフル UI: shimmerパッケージを使用してシマー エフェクトを組み込むことでユーザー インターフェイスを強化し、洗練された読み込みエクスペリエンスを提供します。
24. 動的ページ インジケーター: dots_indicatorパッケージを使用して動的ページ インジケーターを実装し、さまざまな画面を移動するときにユーザーに視覚的な手がかりを提供します。
25. HTTP リクエストと API の統合: httpパッケージを利用して HTTP リクエストを作成し、外部 API とシームレスに統合してデータを取得および更新します。
26. ネットワーク接続チェック: internet_connection_checkerパッケージを利用して、ネットワーク接続をチェックして処理することでスムーズなユーザー エクスペリエンスを確保します。
27. 依存関係の注入: get_itパッケージを活用して効率的な依存関係の注入を行い、コードの保守性を向上させ、依存関係を効果的に管理します。
28. 関数型プログラミングの原則: dartzパッケージから関数型プログラミングの原則を探索して実装し、コードの明瞭さとエラー処理を強化します。
29. 製品の共有:ユーザーは、ソーシャル メディアやその他のプラットフォームでシームレスに共有するために、 share_plusパッケージを使用して製品の詳細を共有できるようになります。
30. URL ランチャーを使用したお問い合わせ画面: url_launcherパッケージを使用して問い合わせ画面を開き、ユーザーが電子メールや電話番号などの外部リンクを操作できるようにします。
31. Get Storage を使用したウィッシュリスト: get_storageパッケージを使用してウィッシュリスト機能を実装し、製品を保存および取得し、パーソナライズされたウィッシュリスト エクスペリエンスをユーザーに提供します。
32. スクリーンショットによる製品の共有:ユーザーがscreenshotパッケージを使用して製品の詳細をスクリーンショットで共有できるようにし、アプリの共有機能を強化します。

依存関係

 environment :
  sdk : ' >=3.0.5 <4.0.0 '

dependencies :
  flutter :
    sdk : flutter
      # the last versions.
  equatable :
      # Package for handling value equality without explicit overrides
  dartz :
      # Functional programming library for Dart
  shared_preferences :
      # Plugin for reading and writing key-value pairs to persistent storage
  http :
      # Package for making HTTP requests
  internet_connection_checker :
      # Library for checking internet connectivity
  flutter_bloc :
      # State management library for Flutter applications
  get_it :
      # Simple service locator for Dart and Flutter projects
  shimmer :
      # Package for adding shimmering effect to Flutter applications
  cached_network_image :
      # Library for loading and caching network images
  flutter_svg :
      # Library for rendering SVG files in Flutter applications
  dots_indicator :
      # Customizable dots indicator for PageView in Flutter
  flutter_secure_storage :
      # Secure storage plugin for Flutter
  photo_view :
      # Package for displaying images in Flutter with zooming and panning capabilities
  dotted_border :
      # Package for creating dotted borders in Flutter
  flutter_local_notifications :
      # Package for displaying local notifications in Flutter applications
  share_plus :
      # Package for sharing content on social media and more
  get_storage : 
      # Persistent storage for Flutter, allowing key-value pair storage
  screenshot :
      # Flutter plugin for taking screenshots of widgets
  path_provider :
      # Plugin for interacting with the file system, including getting the app's temporary and application support directories
  url_launcher :
      # Flutter plugin for launching URLs, emails, making phone calls, and sending SMS.
  flutter_phoenix :
      # Easily restart your application from scratch, losing any previous state. 

アプリをダウンロード

スクリーン。

終わり：

• 製品。
• カテゴリ。
• 製品の詳細。
• 検索。
• 検索結果。
• 家。
• フィルター。
• ログイン。
• サインアップ。
• スプラッシュ。
• カート。
• プロフィール。
• 住所。
• アドレスを追加/編集します。
• 製品を並べ替えます。
• 利用規約。
• ウィッシュリスト。
• お問い合わせ。
• チェックアウト。
• 注文成功。
• 注文失敗。
• 注文。
• 通知。

その他のスクリーンショットについてはこちら

ToDo:

• 支払い。

デモ。

ログイン.mp4

注文カート.mp4

カテゴリ通知プロファイルフィルター.mp4

検索.mp4

• 通常、このケースは、インターネットに接続せずに初めてアプリを開いた場合に発生します。初めてではない場合、アプリはキャッシュされたデータを使用します。

エラーフェニックスリフレッシュ.mp4

はじめる

1. リポジトリのクローンを作成します。
2. プロジェクト ディレクトリに移動します。
3. flutter pub getを実行して依存関係を取得します。
4. 好みの Flutter IDE でプロジェクトを開きます。
5. 目的のエミュレータまたは物理デバイスでアプリを実行します。