تصميم صفحة ويب لعرض مجموعه من العناصر واظهار التفاصيل عند تمرير الماوس باستخدام flutter

تصميم صفحة ويب لعرض مجموعه من العناصر واظهار التفاصيل عند تمرير الماوس باستخدام flutter

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

How to create web page and show items & description in Flutter project

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

ui.dart

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

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InteractiveCard(
              image: cards[0].image!,
              title: cards[0].title!,
              description: cards[0].description!,
            ),
            InteractiveCard(
              image: cards[1].image!,
              title: cards[1].title!,
              description: cards[1].description!,
            ),
            InteractiveCard(
              image: cards[2].image!,
              title: cards[2].title!,
              description: cards[2].description!,
            ),
            InteractiveCard(
              image: cards[3].image!,
              title: cards[3].title!,
              description: cards[3].description!,
            ),
          ],
        ),
      ),
    );
  }
}

class InteractiveCard extends StatefulWidget {
  final String image;
  final String title;
  final String description;
  const InteractiveCard({
    Key? key,
    required this.image,
    required this.title,
    required this.description,
  }) : super(key: key);

  @override
  State<InteractiveCard> createState() => _InteractiveCardState();
}

class _InteractiveCardState extends State<InteractiveCard> {
  double height = 300.0;
  double width = 100.0;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (event) {
        setState(() {
          height = 340.0;
          width = 340.0;
        });
      },
      onExit: (event) {
        setState(() {
          height = 300.0;
          width = 100.0;
        });
      },
      child: AnimatedContainer(
        margin: const EdgeInsets.all(10.0),
        duration: const Duration(milliseconds: 575),
        curve: Curves.easeOut,
        height: height,
        width: width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.0),
          image: DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(
              widget.image,
            ),
          ),
        ),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.0),
            gradient: const LinearGradient(colors: [
              Colors.transparent,
              Colors.transparent,
              Colors.black,
            ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              AnimatedRotation(
                duration: const Duration(milliseconds: 375),
                turns: height == 300.0 ? -1 / 4 : 0,
                curve: Curves.easeOut,
                child: AnimatedPadding(
                  duration: const Duration(milliseconds: 375),
                  padding: EdgeInsets.symmetric(
                      vertical: height == 300.0 ? 20.0 : 0.0),
                  child: Text(
                    widget.title,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ),
              AnimatedContainer(
                duration: const Duration(milliseconds: 375),
                curve: Curves.easeOut,
                height: height == 300 ? 40.0 : 80.0,
                width: 320.0,
                color: Colors.transparent,
                padding: EdgeInsets.only(
                  top: height == 300 ? 100.0 : 20.0,
                ),
                clipBehavior: Clip.antiAlias,
                child: AnimatedOpacity(
                  duration: const Duration(milliseconds: 375),
                  opacity: height == 300 ? 0.0 : 1.0,
                  child: OverflowBox(
                    minWidth: 300.0,
                    minHeight: 80.0,
                    maxHeight: 100.0,
                    maxWidth: 320.0,
                    child: Text(
                      widget.description,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.0,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class Card {
  String? title;
  String? description;
  String? image;

  Card({this.title, this.description, this.image});
}

List<Card> cards = [
  Card(
      title: 'MONSTERA',
      description:
      'Monstera deliciosa, the Swiss cheese plant or split-leaf philodendron is a species of flowering plant native to tropical forests of southern Mexico.',
      image:
      'https://images.unsplash.com/photo-1530049478161-0780526964f4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'),
  Card(
      title: 'HOSTA',
      description:
      'Hosta is a genus of plants commonly known as hostas, plantain lilies and occasionally by the Japanese name gibōshi.',
      image:
      'https://images.unsplash.com/photo-1555037015-1498966bcd7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&h=1080&q=80'),
  Card(
      title: 'DAHLIA',
      description:
      'Dahlia is a genus of bushy, tuberous, herbaceous perennial plants native to Mexico and Central America. A member of the Compositae family',
      image:
      'https://images.unsplash.com/photo-1444021465936-c6ca81d39b84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2039&q=80'),
  Card(
      title: 'PLUMERIA',
      description:
      'Plumeria plants (Plumeria sp), which are also known as Lei flowers and Frangipani, are actually small trees that are native to tropical regions.',
      image:
      'https://images.unsplash.com/photo-1471705301355-ec78367a7b07?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80'),
];