Создание приложения для электронной коммерции с помощью Flutter и Medusa

npm install -g @medusajs/medusa-cli

medusa new flutter-store --seed

medusa develop

git clone https://github.com/medusajs/admin my-admin 

cd my-admin

npm install

npm start

flutter create my_store

name: my_store

description: A new Flutter project.

publish_to: "none" # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:  
  sdk: ">=2.17.0 <3.0.0"

dependencies:  
  flutter:  
    sdk: flutter  
  cupertino_icons: ^1.0.2  
  get: ^4.6.3  
  http: ^0.13.4  
  animated_splash_screen: ^1.2.0

dev_dependencies:  
  flutter_test:  
    sdk: flutter  
  flutter_lints: ^2.0.0

flutter:  
  uses-material-design: true

📦lib  
 ┣ 📂api  
 ┃ ┣ 📜base.dart  
 ┃ ┗ 📜products_api.dart  
 ┣ 📂controller  
 ┃ ┗ 📜productController.dart  
 ┣ 📂model  
 ┃ ┗ 📜product_model.dart  
 ┣ 📂screens  
 ┃ ┣ 📂details  
 ┃ ┃ ┣ 📂components  
 ┃ ┃ ┃ ┣ 📜product_price.dart  
 ┃ ┃ ┃ ┗ 📜product_size.dart  
 ┃ ┃ ┗ 📜product_details.dart  
 ┃ ┣ 📂home  
 ┃ ┃ ┣ 📂components  
 ┃ ┃ ┃ ┣ 📜products.dart  
 ┃ ┃ ┃ ┗ 📜product_card.dart  
 ┃ ┃ ┗ 📜home.dart  
 ┃ ┗ 📜splash_screen.dart  
 ┗ 📜main.dart

import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import 'package:my_store/screens/splash_screen.dart';

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

class MyApp extends StatelessWidget {  
  const MyApp({Key? key}) : super(key: key);  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return GetMaterialApp(  
      title: 'Medusa Store',  
      debugShowCheckedModeBanner: false,  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
        useMaterial3: true,  
      ),  
      home: const SplashScreen(),  
    );  
  }  
}

...

flutter:  
  uses-material-design: true  
  assets:  
    - assets/logo.png

import 'package:animated_splash_screen/animated_splash_screen.dart';  
import 'package:flutter/material.dart';  
import 'package:my_store/screens/home/home.dart';

class SplashScreen extends StatelessWidget {  
  const SplashScreen({Key? key}) : super(key: key);  
  @override  
  Widget build(BuildContext context) {  
    return AnimatedSplashScreen(  
      duration: 2500,  
      splash: 'assets/logo.png',  
      splashIconSize: 300,  
      nextScreen: HomeScreen(),  
      splashTransition: SplashTransition.fadeTransition,  
      backgroundColor: Colors.black,  
    );  
  }  
}

import 'dart:convert';

class Products {  
  Products({  
    required this.id,  
    required this.title,  
    required this.description,  
    required this.thumbnail,  
    required this.variants,  
    required this.options,  
    required this.images,  
  });  
  String id;  
  String title;  
  String description;  
  String thumbnail;  
  List<Variant> variants;  
  List<Option> options;  
  List<Image> images;  
  factory Products.fromJson(Map<String, dynamic> json) => Products(  
        id: json["id"],  
        title: json["title"],  
        description: json["description"],  
        thumbnail: json["thumbnail"],  
        variants: List<Variant>.from(  
            json["variants"].map((x) => Variant.fromJson(x))),  
        options:  
            List<Option>.from(json["options"].map((x) => Option.fromJson(x))),  
        images: List<Image>.from(json["images"].map((x) => Image.fromJson(x))),  
      );  
}

class Image {  
  Image({  
    required this.url,  
  });  
  String url;  
  factory Image.fromJson(Map<String, dynamic> json) => Image(  
        url: json["url"],  
      );  
}

class Option {  
  Option({  
    required this.title,  
    required this.values,  
  });  
  String title;  
  List<Value> values;  
  factory Option.fromJson(Map<String, dynamic> json) => Option(  
        title: json["title"],  
        values: List<Value>.from(json["values"].map((x) => Value.fromJson(x))),  
      );  
}

class Value {  
  Value({  
    required this.id,  
    required this.value,  
  });  
  String id;  
  String value;  
  factory Value.fromJson(Map<String, dynamic> json) => Value(  
        id: json["id"],  
        value: json["value"]!,  
      );  
}

class Variant {  
  Variant({  
    required this.id,  
    required this.title,  
    required this.prices,  
    required this.options,  
  });  
  String id;  
  String title;  
  List<Price> prices;  
  List<Value> options;  
  factory Variant.fromJson(Map<String, dynamic> json) => Variant(  
        id: json["id"],  
        title: json["title"]!,  
        prices: List<Price>.from(json["prices"].map((x) => Price.fromJson(x))),  
        options:  
            List<Value>.from(json["options"].map((x) => Value.fromJson(x))),  
      );  
}

class Price {  
  Price({  
    required this.id,  
    required this.currencyCode,  
    required this.amount,  
  });  
  String id;  
  String currencyCode;  
  int amount;  
  factory Price.fromJson(Map<String, dynamic> json) => Price(  
        id: json["id"],  
        currencyCode: json["currency_code"]!,  
        amount: json["amount"],  
      );  
}

class Base {  
   static const String baseUrl = '<http://192.168.0.104:9000>';  
}

<activity  

  android:usesCleartextTraffic="true" //paste this

....  
</activity>

<dist>  
        <key>NSAppTransportSecurity</key>  
        <dict>  
            <key>NSAllowsArbitraryLoads</key>  
            <true/>  
        </dict>

 ...  
</dict>

import 'dart:convert';  
import 'package:http/http.dart' as http;  
import 'package:my_store/api/base.dart';  
import 'package:my_store/model/product_model.dart';

class ProductApi {  
  Future<List<Products>> getAllProducts() async {  
    final url = Uri.parse('${Base.baseUrl}/store/products');  
    try {  
      final response = await http.get(url);  
      if (response.statusCode == 200) {  
        var result = jsonDecode(response.body);  
        var data = result['products'];

 return List<Products>.from(data.map((x) => Products.fromJson(x)));  
      } else {  
        return [];  
      }  
    } catch (e) {  
      print(e.toString());  
    }  
    throw 'error';  
  }  
}

import 'package:get/get.dart';  
import 'package:my_store/api/products_api.dart';  
import 'package:my_store/model/product_model.dart';

class AllProductsController extends GetxController {  
  var getAllProducts = <Products>[].obs;  
  var isLoading = true.obs;

 @override  
  void onInit() {  
    super.onInit();  
    fetchAllProduct();  
  }

 void fetchAllProduct() async {  
    isLoading(true);  
    try {  
      var getAllProductResult = await ProductApi().getAllProducts();  
      getAllProducts.value = getAllProductResult;  
    } finally {  
      isLoading(false);  
    }  
  }  
}

import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import 'package:my_store/model/product_model.dart' as model;

class ProductCard extends StatelessWidget {  
  const ProductCard({Key? key, required this.product}) : super(key: key);

 final model.Products product;

 @override  
  Widget build(BuildContext context) {  
    return SizedBox(  
        width: 140,  
        child: GestureDetector(  
            onTap: (){  
                                //Todo: Route to Product Details Screen  
                        },  
            child: Column(  
              crossAxisAlignment: CrossAxisAlignment.start,  
              children: [  
                Expanded(  
                  child: Hero(  
                    tag: product.id.toString(),  
                    child: Container(  
                        padding: const EdgeInsets.all(20),  
                        decoration: BoxDecoration(  
                            color: Colors.white,  
                            borderRadius: BorderRadius.circular(10),  
                            image: DecorationImage(  
                                image: NetworkImage(product.thumbnail),  
                                fit: BoxFit.cover))),  
                  ),  
                ),  
                const SizedBox(height: 10),  
                Padding(  
                    padding: const EdgeInsets.symmetric(horizontal: 10.0),  
                    child: Text(  
                      product.title,  
                      style: const TextStyle(  
                          color: Colors.black, fontWeight: FontWeight.w600),  
                      maxLines: 2,  
                    )),  
                const SizedBox(height: 10),  
                Padding(  
                    padding: const EdgeInsets.symmetric(horizontal: 10.0),  
                    child: Text("\$${product.variants[0].prices[1].amount / 100}",  
                        style: const TextStyle(  
                          fontSize: 18,  
                          fontWeight: FontWeight.w600,  
                          color: Colors.teal,  
                        ))),  
                const SizedBox(height: 10),  
              ],  
            )));  
  }  
}

import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import 'package:my_store/controller/productController.dart';  
import 'package:my_store/screens/home/components/product_card.dart';

class AllProducts extends StatelessWidget {  
  AllProducts({Key? key}) : super(key: key);

 final productController = Get.put(AllProductsController());

 @override  
  Widget build(BuildContext context) {  
    return SingleChildScrollView(  
        child: Column(children: [  
     Text(  
          "All Products",  
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
 const SizedBox(height: (20)),
 Obx(  
        () => SizedBox(  
            width: double.infinity,  
            child: productController.isLoading.value  
                ? const Center(  
                    child: CircularProgressIndicator(),  
                  )  
                : Padding(  
                    padding: const EdgeInsets.symmetric(horizontal: 20.0),  
                    child: GridView.builder(  
                        physics: const NeverScrollableScrollPhysics(),  
                        shrinkWrap: true,  
                        itemCount: productController.getAllProducts.length,  
                        gridDelegate:  
                            const SliverGridDelegateWithFixedCrossAxisCount(  
                          crossAxisCount: 2,  
                          crossAxisSpacing: 20,  
                          mainAxisSpacing: 20,  
                          childAspectRatio: 0.6,  
                        ),  
                        itemBuilder: (BuildContext context, int index) =>  
                            ProductCard(  
                              product: productController.getAllProducts[index],  
                            )),  
                  )),  
      ),  
    ]));  
  }  
}

import 'package:flutter/material.dart';  
import 'package:my_store/screens/home/components/products.dart';

class HomeScreen extends StatelessWidget {  
  const HomeScreen({Key? key}) : super(key: key);  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Home Page'),  
      ),  
      body: AllProducts(),  
    );  
  }  
}

flutter run

import 'package:flutter/material.dart';  
import 'package:my_store/model/product_model.dart';

class ProductPrice extends StatelessWidget {  
  const ProductPrice({Key? key, required this.product}) : super(key: key);

 final Products product;

 @override  
  Widget build(BuildContext context) {  
    return SizedBox(  
      height: 50.0,  
      child: ListView.separated(  
        itemCount: product.variants[0].prices.length,  
        scrollDirection: Axis.horizontal,  
        shrinkWrap: true,  
        itemBuilder: (context, index) => Padding(  
          padding: const EdgeInsets.symmetric(horizontal:20.0),  
          child: Row(  
            children: [  
              Text(product.variants[0].prices[index].currencyCode.toUpperCase(),  
                  style:  
                      const TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),  
              const SizedBox(width: 10.0),  
              Text('${product.variants[0].prices[index].amount / 100}',  
                  style: const TextStyle(  
                      fontWeight: FontWeight.bold,  
                      fontSize: 20,  
                      color: Colors.teal)),  
            ],  
          ),  
        ),  
        separatorBuilder: (context, index) {  
          return const SizedBox(width: 10.0);  
        },  
      ),  
    );  
  }  
}

import 'package:flutter/material.dart';  
import 'package:my_store/model/product_model.dart';

class ProductSize extends StatelessWidget {  
  ProductSize({Key? key, required this.product}) : super(key: key);

 final Products product;  
  Color secondary = const Color(0xFFE7B944);  
  Color textLightColor = const Color(0xFF605A65);

 @override  
  Widget build(BuildContext context) {  
    return Padding(  
      padding: const EdgeInsets.symmetric(horizontal: 20.0),  
      child: SingleChildScrollView(  
        scrollDirection: Axis.horizontal,  
        child: Row(  
          children: [  
            const Text('Sizes Available',  
                style: TextStyle(fontSize: 18, color: Colors.grey)),  
            const SizedBox(width: 20),  
            ...List.generate(  
                product.variants.length,  
                (index) => Container(  
                    margin: const EdgeInsets.only(right: 10.0),  
                    padding: const EdgeInsets.symmetric(horizontal: 15.0),  
                    decoration: BoxDecoration(  
                        color: secondary,  
                        borderRadius: BorderRadius.circular(5.0)),  
                    child: Center(  
                        child: Text(  
                      product.variants[index].title,  
                      style: TextStyle(color: textLightColor),  
                    )))),  
          ],  
        ),  
      ),  
    );  
  }  
}

import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import 'package:my_store/model/product_model.dart' as model;  
import 'package:my_store/screens/details/components/product_price.dart';  
import 'package:my_store/screens/details/components/product_size.dart';

class ProductDetails extends StatefulWidget {  
  ProductDetails({Key? key, required this.product}) : super(key: key);

 final model.Products product;

 @override  
  State<ProductDetails> createState() => _ProductDetailsState();  
}

class _ProductDetailsState extends State<ProductDetails> {  
  Color white = const Color(0xFFFFFFFF);

 int selectedImage = 0;

 @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
        body: SingleChildScrollView(  
      child: Column(  
        crossAxisAlignment: CrossAxisAlignment.start,  
        children: [  
          SizedBox(  
              width: Get.width,  
              height: Get.height * 0.35,  
              child: Hero(  
                  tag: widget.product.id,  
                  child: Image.network(widget.product.images[selectedImage].url,  
                      fit: BoxFit.cover))),  
          Row(  
            mainAxisAlignment: MainAxisAlignment.center,  
            children: List.generate(  
                widget.product.images.length, (index) => productReview(index)),  
          ),
 Padding(  
              padding: const EdgeInsets.all(20),  
              child: Text(widget.product.title,  
                  style: const TextStyle(  
                      fontWeight: FontWeight.bold, fontSize: 24))),  
          ProductPrice(product: widget.product),  
          const SizedBox(height: 10.0),  
          const Padding(  
              padding: EdgeInsets.symmetric(horizontal: 20.0),  
              child: Text('Product Details',  
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18))),  
          const SizedBox(height: 10.0),  
          Padding(  
              padding: const EdgeInsets.symmetric(horizontal: 20.0),  
              child: Text(widget.product.description,  
                  style: const TextStyle(fontSize: 18, color: Colors.grey))),  
          const SizedBox(height: 10.0),  
          ProductSize(product: widget.product),  
        ],  
      ),  
    ));  
  }

 GestureDetector productReview(int index) {  
    return GestureDetector(  
      onTap: () {  
        setState(() => selectedImage = index);  
      },  
      child: Container(  
        margin: const EdgeInsets.only(right: 15, top: 15),  
        padding: const EdgeInsets.all(3),  
        width: 70,  
        height: 70,  
        decoration: BoxDecoration(  
          color: white,  
          borderRadius: BorderRadius.circular(10),  
          border: Border.all(  
            width: 2,  
            color: selectedImage == index  
                ? const Color(0xFFE7B944)  
                : Colors.transparent,  
          ),  
        ),  
        child:  
            Image.network(widget.product.images[index].url, fit: BoxFit.cover),  
      ),  
    );  
  }  
}

import 'package:my_store/screens/details/product_details.dart';

onTap: () {   
        //Todo: Route to Product Details Screen  
        Get.to(() => ProductDetails(product: product));  
},