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

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

پیش نیازها

• نصب و راه اندازی Flutter SDK
• آشنایی با زبان برنامه نویسی Dart
• نصب یک ویرایشگر کد مناسب (مانند Visual Studio Code یا Android Studio)

مراحل ساخت اپلیکیشن

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

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

        
            flutter create shop_app
        
    

2. ساختاردهی پروژه

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

• lib/: شامل کدهای اصلی اپلیکیشن
• models/: شامل مدل های داده (مانند Product)
• widgets/: شامل ویجت های سفارشی
• screens/: شامل صفحات مختلف اپلیکیشن
• services/: شامل سرویس های ارتباط با API

3. ایجاد مدل Product

یک فایل به نام product.dart در پوشه models ایجاد کنید و کلاس Product را به شکل زیر تعریف کنید:

        
            class Product {
              final int id;
              final String name;
              final double price;
              final String imageUrl;
              final String description;

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

4. ایجاد لیست محصولات

یک لیست از محصولات را در یک فایل جداگانه (مثلاً product_data.dart) تعریف کنید:

        
            final List<Product> products = [
              Product(
                id: 1,
                name: 'محصول 1',
                price: 25.0,
                imageUrl: 'https://example.com/image1.jpg',
                description: 'توضیحات محصول 1',
              ),
              Product(
                id: 2,
                name: 'محصول 2',
                price: 30.0,
                imageUrl: 'https://example.com/image2.jpg',
                description: 'توضیحات محصول 2',
              ),
            ];
        
    

5. ساخت صفحه اصلی (HomePage)

یک فایل به نام home_page.dart در پوشه screens ایجاد کنید و صفحه اصلی را به شکل زیر پیاده سازی کنید:

        
        import 'package:flutter/material.dart';
        import '../models/product.dart';
        import '../product_data.dart';

        class HomePage extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text('فروشگاه'),
              ),
              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: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Image.network(
                            product.imageUrl,
                            height: 100,
                            width: double.infinity,
                            fit: BoxFit.cover,
                          ),
                          SizedBox(height: 8.0),
                          Text(
                            product.name,
                            style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          SizedBox(height: 4.0),
                          Text(
                            '\\$${product.price.toStringAsFixed(2)}',
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.green,
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            );
          }
        }
        
    

6. به روزرسانی فایل main.dart

فایل main.dart را به روزرسانی کنید تا صفحه اصلی نمایش داده شود:

        
            import 'package:flutter/material.dart';
            import 'screens/home_page.dart';

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

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

7. اجرای اپلیکیشن

با استفاده از دستور زیر اپلیکیشن را اجرا کنید:

        
            flutter run
        
    

امکانات تکمیلی

• اضافه کردن سبد خرید
• صفحه جزئیات محصول
• پرداخت آنلاین
• مدیریت کاربران
• فیلتر و جستجو

پرسش های متداول (FAQ)