آموزش جامع ساخت اپلیکیشن فروشگاهی با Flutter برای مبتدی ها

فلاتر (Flutter) یک فریم ورک متن باز توسعه یافته توسط گوگل است که به شما امکان می دهد برنامه های موبایل، وب و دسکتاپ را با یک کدبیس واحد ایجاد کنید. در این آموزش، به شما نشان خواهیم داد که چگونه با استفاده از فلاتر، یک اپلیکیشن فروشگاهی قدرتمند و کاربردی بسازید. این آموزش برای افرادی که تجربه قبلی در برنامه نویسی ندارند نیز مناسب است.

فصل اول: مقدمات و پیش نیازها

1.1. نصب و راه اندازی Flutter

قبل از شروع، باید فلاتر را روی سیستم خود نصب کنید. مراحل نصب بسته به سیستم عامل شما متفاوت است:

• ویندوز: به وب سایت رسمی فلاتر مراجعه کرده و دستورالعمل های نصب را دنبال کنید.
• مک: از Homebrew برای نصب فلاتر استفاده کنید.
• لینوکس: بسته فلاتر را دانلود کرده و آن را در مسیر مورد نظر خود استخراج کنید.

پس از نصب، مطمئن شوید که فلاتر به درستی پیکربندی شده است. دستور flutter doctor را در ترمینال اجرا کنید. این دستور مشکلات احتمالی را شناسایی و راهنمایی های لازم را برای رفع آن ها ارائه می دهد.

1.2. نصب Android Studio یا VS Code

برای توسعه با فلاتر، به یک ویرایشگر کد نیاز دارید. دو گزینه محبوب عبارتند از Android Studio و VS Code. هر دو ویرایشگر دارای افزونه های فلاتر هستند که به شما کمک می کنند کدنویسی را آسان تر و سریع تر انجام دهید.

• Android Studio: این IDE به طور خاص برای توسعه برنامه های اندرویدی طراحی شده است.
• VS Code: یک ویرایشگر کد سبک و قدرتمند که از زبان های برنامه نویسی مختلف پشتیبانی می کند.

پس از نصب ویرایشگر کد، افزونه فلاتر را نصب کنید. در Android Studio، به File > Settings > Plugins بروید و افزونه Flutter را جستجو و نصب کنید. در VS Code، به Extensions بروید و افزونه Flutter را جستجو و نصب کنید.

فصل دوم: ایجاد پروژه و ساختار اولیه

2.1. ایجاد پروژه جدید Flutter

برای شروع، یک پروژه جدید فلاتر ایجاد کنید. در ترمینال، به مسیری که می خواهید پروژه خود را در آن ایجاد کنید بروید و دستور زیر را اجرا کنید:

flutter create shop_app

این دستور یک پروژه جدید فلاتر با نام shop_app ایجاد می کند. پس از ایجاد پروژه، به دایرکتوری پروژه بروید:

cd shop_app

2.2. بررسی ساختار پروژه

ساختار پروژه فلاتر به صورت زیر است:

• android: شامل کدهای مربوط به پلتفرم اندروید.
• ios: شامل کدهای مربوط به پلتفرم iOS.
• lib: شامل کدهای اصلی برنامه فلاتر شما.
• pubspec.yaml: فایل پیکربندی پروژه که شامل وابستگی ها و تنظیمات دیگر است.

فایل lib/main.dart نقطه شروع برنامه شما است. این فایل شامل کد اولیه برنامه است که یک شمارنده ساده را نمایش می دهد. ما این کد را تغییر خواهیم داد تا اپلیکیشن فروشگاهی خود را بسازیم.

فصل سوم: طراحی رابط کاربری

3.1. ایجاد صفحه اصلی

ابتدا، صفحه اصلی اپلیکیشن خود را طراحی می کنیم. صفحه اصلی شامل موارد زیر خواهد بود:

• نوار بالا (App Bar) با عنوان اپلیکیشن
• لیست محصولات
• دکمه سبد خرید

در فایل lib/main.dart، کد زیر را جایگزین کد قبلی کنید:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'فروشگاه من',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('فروشگاه من'),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              // TODO: نمایش سبد خرید
            },
          ),
        ],
      ),
      body: Center(
        child: Text('لیست محصولات'),
      ),
    );
  }
}

این کد یک صفحه اصلی ساده با نوار بالا و عنوان "فروشگاه من" ایجاد می کند. همچنین یک دکمه سبد خرید در نوار بالا وجود دارد که در آینده آن را پیاده سازی خواهیم کرد.

3.2. نمایش لیست محصولات

اکنون، لیست محصولات را در صفحه اصلی نمایش می دهیم. ابتدا، یک مدل برای محصولات خود ایجاد می کنیم. یک فایل جدید با نام lib/models/product.dart ایجاد کنید و کد زیر را در آن قرار دهید:

class Product {
  final String name;
  final double price;
  final String imageUrl;

  Product({required this.name, required this.price, required this.imageUrl});
}

این کلاس یک مدل ساده برای محصولات با نام، قیمت و تصویر ایجاد می کند.

سپس، یک لیست از محصولات را در فایل lib/main.dart ایجاد کنید:

final List products = [
  Product(name: 'محصول 1', price: 10000, imageUrl: 'url_تصویر_محصول_1'),
  Product(name: 'محصول 2', price: 20000, imageUrl: 'url_تصویر_محصول_2'),
  Product(name: 'محصول 3', price: 30000, imageUrl: 'url_تصویر_محصول_3'),
];

توجه داشته باشید که باید url_تصویر_محصول_1 و غیره را با آدرس واقعی تصاویر جایگزین کنید.

اکنون، لیست محصولات را در صفحه اصلی نمایش می دهیم. کد زیر را در فایل lib/main.dart جایگزین Center(child: Text('لیست محصولات'),) کنید:

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    final product = products[index];
    return Card(
      margin: EdgeInsets.all(8.0),
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Row(
          children: [
            Image.network(
              product.imageUrl,
              width: 80,
              height: 80,
              fit: BoxFit.cover,
            ),
            SizedBox(width: 16.0),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  product.name,
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
                ),
                Text(
                  '${product.price} تومان',
                  style: TextStyle(fontSize: 16.0),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  },
)

این کد یک لیست از محصولات را با استفاده از ListView.builder ایجاد می کند. هر محصول در یک کارت (Card) نمایش داده می شود که شامل تصویر، نام و قیمت آن است.

فصل چهارم: افزودن سبد خرید

4.1. ایجاد صفحه سبد خرید

ابتدا، یک صفحه برای سبد خرید ایجاد می کنیم. یک فایل جدید با نام lib/screens/cart_screen.dart ایجاد کنید و کد زیر را در آن قرار دهید:

import 'package:flutter/material.dart';

class CartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('سبد خرید'),
      ),
      body: Center(
        child: Text('سبد خرید خالی است'),
      ),
    );
  }
}

این کد یک صفحه ساده با عنوان "سبد خرید" ایجاد می کند. در حال حاضر، این صفحه فقط یک پیام نشان می دهد که سبد خرید خالی است.

4.2. افزودن دکمه سبد خرید به صفحه اصلی

اکنون، دکمه سبد خرید را به صفحه اصلی اضافه می کنیم. در فایل lib/main.dart، کد زیر را در تابع onPressed دکمه سبد خرید جایگزین کنید:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => CartScreen()),
);

این کد با استفاده از Navigator.push صفحه سبد خرید را باز می کند.

4.3. پیاده سازی منطق سبد خرید

برای پیاده سازی منطق سبد خرید، نیاز به یک لیست برای نگهداری محصولات موجود در سبد خرید داریم. همچنین، نیاز به یک دکمه "افزودن به سبد خرید" در هر محصول داریم.

این قسمت پیچیده تر است و نیاز به استفاده از مدیریت حالت (State Management) دارد. یکی از روش های ساده استفاده از setState است. روش های پیشرفته تر شامل Provider، Bloc و Riverpod هستند. برای سادگی، از setState استفاده می کنیم.

ابتدا، فایل lib/main.dart را به یک ویجت StatefulWidget تبدیل کنید:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  List cartItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('فروشگاه من'),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => CartScreen()),
              );
            },
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          final product = products[index];
          return Card(
            margin: EdgeInsets.all(8.0),
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Image.network(
                    product.imageUrl,
                    width: 80,
                    height: 80,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(width: 16.0),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        product.name,
                        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        '${product.price} تومان',
                        style: TextStyle(fontSize: 16.0),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            cartItems.add(product);
                          });
                        },
                        child: Text('افزودن به سبد خرید'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

این کد یک لیست به نام cartItems برای نگهداری محصولات موجود در سبد خرید ایجاد می کند. همچنین، یک دکمه "افزودن به سبد خرید" به هر محصول اضافه می کند که با کلیک روی آن، محصول به لیست cartItems اضافه می شود.

سپس، در فایل lib/screens/cart_screen.dart، لیست محصولات موجود در سبد خرید را نمایش می دهیم:

import 'package:flutter/material.dart';
import '../main.dart'; //Import HomePage

class CartScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //Get the state of HomePage
    final homePageState = context.findAncestorStateOfType<_HomePageState>();

    return Scaffold(
      appBar: AppBar(
        title: Text('سبد خرید'),
      ),
      body: homePageState == null || homePageState.cartItems.isEmpty
          ? Center(
              child: Text('سبد خرید خالی است'),
            )
          : ListView.builder(
              itemCount: homePageState.cartItems.length,
              itemBuilder: (context, index) {
                final product = homePageState.cartItems[index];
                return Card(
                  margin: EdgeInsets.all(8.0),
                  child: Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Image.network(
                          product.imageUrl,
                          width: 80,
                          height: 80,
                          fit: BoxFit.cover,
                        ),
                        SizedBox(width: 16.0),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              product.name,
                              style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
                            ),
                            Text(
                              '${product.price} تومان',
                              style: TextStyle(fontSize: 16.0),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
    );
  }
}

این کد یک لیست از محصولات موجود در سبد خرید را با استفاده از ListView.builder ایجاد می کند. هر محصول در یک کارت (Card) نمایش داده می شود که شامل تصویر، نام و قیمت آن است. اگر سبد خرید خالی باشد، یک پیام نشان داده می شود که سبد خرید خالی است.

فصل پنجم: امکانات پیشرفته

5.1. فیلتر و جستجو

برای بهبود تجربه کاربری، می توانید امکان فیلتر و جستجو را به اپلیکیشن خود اضافه کنید. برای این کار، می توانید از ویجت های TextField و DropdownButton استفاده کنید.

5.2. پرداخت آنلاین

برای فعال کردن پرداخت آنلاین، باید از درگاه های پرداخت آنلاین استفاده کنید. در ایران، درگاه های پرداخت آنلاین مختلفی وجود دارند که می توانید از آن ها استفاده کنید. برای این کار، باید API درگاه پرداخت را در اپلیکیشن خود پیاده سازی کنید.

5.3. مدیریت کاربران

برای مدیریت کاربران، می توانید از سرویس های احراز هویت Firebase Authentication استفاده کنید. این سرویس به شما امکان می دهد کاربران را ثبت نام، ورود و مدیریت کنید.

سوالات متداول (FAQ)

1. آیا برای ساخت اپلیکیشن فروشگاهی با Flutter نیاز به دانش برنامه نویسی دارم؟

اگرچه دانش برنامه نویسی به شما کمک می کند، اما این آموزش برای مبتدیان طراحی شده است و شما می توانید بدون داشتن تجربه قبلی نیز اپلیکیشن خود را بسازید.

2. چه مدت زمانی برای ساخت یک اپلیکیشن فروشگاهی با Flutter نیاز است؟

مدت زمان مورد نیاز بستگی به پیچیدگی اپلیکیشن شما دارد. یک اپلیکیشن ساده را می توان در چند روز ساخت، اما یک اپلیکیشن پیچیده ممکن است چند هفته یا چند ماه زمان ببرد.

3. آیا می توان اپلیکیشن فروشگاهی ساخته شده با Flutter را در iOS و Android منتشر کرد؟

بله، یکی از مزایای فلاتر این است که شما می توانید با یک کدبیس واحد، اپلیکیشن خود را در هر دو پلتفرم iOS و Android منتشر کنید.

4. هزینه ساخت یک اپلیکیشن فروشگاهی با Flutter چقدر است؟

هزینه ساخت بستگی به عوامل مختلفی مانند پیچیدگی اپلیکیشن، تعداد امکانات و نوع توسعه دهنده دارد. اگر خودتان اپلیکیشن را بسازید، هزینه شما فقط شامل هزینه ثبت نام در فروشگاه های اپلیکیشن (App Store و Google Play) خواهد بود.