تصميم صفحة لعرض المنتج وعمل انميشن على المنتج وتغيير اللون والسعر في Flutter

Ahmed Mahmoud

اخر تحديث :

تصميم صفحة لعرض المنتج وعمل انميشن على المنتج وتغيير اللون والسعر في Flutter

في هذا القسم سوف نحاول دائما مساعدتكم في تحسن شكل التطبيق الخاص بكم عن طريق وضع ui لبعض التصاميم الجميلة التي يمكنك استخدامها داخل تطبيقك بكل سهوله وهذا من اجل مساعتدكم في بناء التصميم الخاص بكم بسهوله وتحسين من شكله وايضا تعلم اشياء جديده من كل تصميم نقوم بوضعه لكم , وسوف يكون هذا القسم مختص بتصاميم ui مع كود الفلاتر الخاص بها , وفي هذا المقال سوف نبدء معكم بتصميم شكل لصفحة عرض المنتج في الflutter بشكل جديد ومختلف عن باقي الافكار التي قد تراها من قبل .

سوف نقوم بوضع صورة المنتج وجعلها تتحرك الى الاعلى والاسفل بشكل بطيئ كما هو موضح ويجب ان تكون هذه الصورة بصيغة png من اجل ازالة الخلفيه من عليها وايضا سوف نقوم بعمل انميشن عند تغيير كل لون عنصر كما هو موضح لكم بالصورة الخاصه بالمقال والموضوع بسيط جدا ويمكنك القيام بكل هذا في صفحة واحده فقط دون الحاجه الى تصميم اكثر من صفحة .

صفحة عرض تفاصيل المنتج مع تحريك العنصر

في البداية سوف نقوم بعمل animation وسوف يكون مدة الانميشن ثانية واحده فقط ويكون بشكل معكوس بمعنى انه عندما ينتهي سوف يتم تشغيله مره اخرى ولكن بشكل عكسي بعد ذلك قمنا بعمل قائمة تحتوي على مجموعة من الصور اللون والصورة وهذه الlist عباره عن model of data موجود بنهايه الكود , بعد ذلك قمنا بعمل التصميم الخاص بالصفحة كما هو موضح .

Product.dart

class CodeLess extends StatefulWidget {
  const CodeLess({Key? key}) : super(key: key);

  @override
  State<CodeLess> createState() => _CodeLessState();
}

class _CodeLessState extends State<CodeLess> with SingleTickerProviderStateMixin{
  late AnimationController animationController;
  late Animation<Offset> hoverAnimation;
  int currentIndex = 0;


  // animation As soon as you start
  @override
  void initState() {
    // execute animation and repeat
    animationController = AnimationController(vsync: this ,
      duration: const Duration(seconds: 1),)..repeat(reverse: true);
    hoverAnimation = Tween(
      // left to right | down to up
      begin: const Offset(0,0) ,
      // right to left | up to down
      end: const Offset(0.0,0.03),
    ).animate(animationController);
    super.initState();
  }

  // list of products
  List<Product> products = [
    Product(
      color: const Color(0xff000000),
      path: 'assets/black.png',
      price: "18.99 \u0024",
    ),
    Product(
      color: const Color(0xfffcecd0),
      path: 'assets/cream.png',
      price: "16.99 \u0024",
    ),
    Product(
      color: const Color(0xffb6d7e4),
      path: 'assets/blue.png',
      price: "15.99 \u0024",
    ),
  ];


  @override
  Widget build(BuildContext context){

      return Scaffold(
          backgroundColor: const Color(0xff292929),
          body: SafeArea(
            child: Column(
              children: [
                SlideTransition(
                position: hoverAnimation,
                child: AnimatedSwitcher(
                  duration: const Duration(milliseconds: 500),
                    child: Image.asset(products[currentIndex].path ,
                        key: ValueKey<int>(currentIndex),
                    ))),
                const SizedBox(height: 30,),
                const Text('Choose any Headset', style: TextStyle(color: Colors.redAccent ,
                    fontSize: 34 , fontWeight: FontWeight.bold),),
                const Text('Chose any color', style: TextStyle(color: Colors.white , fontSize: 24),),
                const SizedBox(height: 30,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  // list of color and position
                  children: List.generate(products.length , (index){
                    return Container(
                      margin: const EdgeInsets.symmetric(horizontal: 10),
                      child: GestureDetector(
                        // replace currentIndex for index
                        onTap: (){
                          setState(() {
                            currentIndex = index;
                          });
                        },
                        child: CircleAvatar(
                          radius: 15,
                          // back ground of index color
                          backgroundColor: products[index].color,
                        ),
                      ),
                    );
                  }),
                ),
                const SizedBox(height: 30,),
                Text(products[currentIndex].price, style: TextStyle(color: Colors.white ,
                    fontSize: 18 , fontWeight: FontWeight.w400),),
                const SizedBox(height: 30,),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 15.0),
                  child: MaterialButton(
                    minWidth: double.infinity,
                    height: 45,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
                    onPressed: (){},
                    color: products[currentIndex].color,
                    child: new Text('Preciso de ajuda',
                        style: new TextStyle(fontSize: 16.0,
                            color: currentIndex == 1 ? Colors.black54 : Colors.white)),
                  ),
                ),

              ],
            ),
          ),
      );
  }
}

class Product {
  final Color color;
  final String path;
  final String price;
  Product({required this.color , required this.path ,required this.price});
}

رابط المشروع على الجيت هب

لمزيد من الشروحات :