الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

لقطات الشاشة

موقع flutter.dev - أعيد إنشاء رفرفة

موقع flutter.dev ، الآن في رفرفة!

عرض موقع Flutter

نسخة HTML

نسخة قماش

لقطات الشاشة

سطح المكتب قرص متحرك
لقطات الشاشةلقطات الشاشةلقطات الشاشة

عن

تم إنشاء هذا القالب لعرض أسبوع رفرفة حول بناء مواقع ويب مستجيبة مع إطار رفرفة استجابة.

إذا أعجبك هذا المشروع أو ساعدك ، فيرجى ترك بريدك الإلكتروني للحصول على التحديثات. على الرغم من أنه غير مطلوب ، إلا أنني أقدر ذلك كثيرًا!

فيديو

بناء مواقع رفرفة مستجيبة بسهولة - عرض أسبوع الرفرفة

29:45 - إعادة إنشاء موقع Flutter في Flutter.

عناصر

حدد المكونات مع التعليق التنموي والاستخدام الإطار الاستجابة تجول.

كاروسيل الرسوم المتحركة

لقطات الشاشة

مكون الكاروسيل المتحرك هو لافتة للنظر وجميلة. لحسن الحظ ، فإن إنشاءه في رفرفة أمر سهل للغاية. كل ما نحتاجه هو إنشاء سقالة الرسوم المتحركة أولاً!

يمكن تقسيم الرسوم المتحركة إلى مكونات carousel ، slide ، element ، ومكونات animation . كل مكون هو طبقة في سقالة الرسوم المتحركة لدينا مع مسؤولياتها ومنطقها.

  • carousel - هناك 4 شرائح دائرية. يتم عرض كل شريحة لحوالي 6400 ميلي ثانية. مسؤولية الكاروسيل هي حمل شرائح الأطفال وتنسيق تحولاتها. 

      carousel

  • slide - تحتوي كل شريحة على صور ونص تظهر وتختفي مع الرسوم المتحركة للدخول والخروج. مسؤولية الشريحة هي وضع عناصرها الفرعية وتنسيق الرسوم المتحركة الخاصة بهم. 

      carousel_slide_1
  carousel_slide_2
  carousel_slide_3
  carousel_slide_4
  model_carousel_item_animation

  • element - العناصر هي محتوى الشرائح. العناصر عبارة عن أجهزة تعامل واضحة لا تعرف كيف سيتم تحريكها. متطلباتهم الوحيدة هو دعم أن تكون متحركة. يتم استخلاص منطق الرسوم المتحركة إلى طبقة منفصلة. 

      carousel_text
  Image

  • animation - سلوكيات الرسوم المتحركة. تعرض الرسوم المتحركة واجهة يمكن أن يستخدمها الرسوم المتحركة مثل شريحة لدينا للتحكم في حالة الرسوم المتحركة. 

      animation_slide_up_down_fade

مع سقالة الرسوم المتحركة التي تم إنشاؤها ، فإن إنشاء الرسوم المتحركة نفسها أمر سهل للغاية.

  1. إنشاء شريحة.
  2. إضافة عناصر الشريحة.
  3. تطبيق الرسوم المتحركة على العناصر الشريحة.
  4. تنسيق إدخال العناصر والخروج.
  5. إضافة شريحة إلى carousel.

أخيرًا ، يتم لف الرسوم المتحركة بأكملها في مجموعة ResponsiveWrapper وإعطاء عرض وارتفاع MediaQuery مرجعي. هذا يسمح للركور بعرض بشكل صحيح في أي حجم شاشة. 

  ResponsiveWrapper (
      maxWidth : 1200 ,
      minWidth : 1200 ,
      defaultScale : true ,
      mediaQueryData : MediaQueryData (size : Size ( 1200 , 640 )),
      child : Carousel ()
    )

تم إنشاء سقالة الرسوم المتحركة بناءً على نموذج الرسوم المتحركة الزمني. جميع فترات الرسوم المتحركة هي نسبية تتيح تخصيصًا وسهولة التعديلات في المستقبل. نأمل في يوم من الأيام ، أن يقوم شخص ما بإنشاء محرر الرسوم المتحركة السحب وإسقاط Flutter من شأنه أن ينشئ جميع الكود تلقائيًا.

سمات

لقطات الشاشة

قسم الميزات عبارة عن صف بسيط مع مكونات الميزة. هذا هو حتى يضيق التصميم وليس هناك مساحة كافية للصف. ثم يحتاج إلى أن يصبح عمودًا!

يساعد ResponsiveRowColumn في الانتقال بين تخطيطات الصف والعمود بأحجام شاشة مختلفة. عندما يكون rowColumn صحيحًا ، يكون التصميم عبارة عن صف. عندما يكون rowColumn False ، يكون التصميم عمودًا. 

 ResponsiveRowColumn (
        rowColumn : ! ResponsiveWrapper . of (context). isSmallerThan ( DESKTOP ),
        children : [
          ResponsiveRowColumnItem (
            child : Feature ()
            )
        ]
    )

ميزة التفاصيل

لقطات الشاشة

يحتوي مكون تفاصيل الميزة على صفين من المحتوى ، ولكل منهما نسبة عرض مختلفة. التوازن هنا هو 7: 5 مع الرسم الذي يشغل مساحة أكبر قليلاً من النص. يمكن إنشاء هذا السلوك عن طريق تعيين قيمة مرنة لكل صف. ومع ذلك ، يجب إزالة المرن عندما يكون التخطيط في وضع العمود لتجنب أخطاء القيود غير الصالحة.

يتم استخدام ResponsiveRowColumnItem لالتفاف الأطفال في عنصر واجهة مستخدم Flexible عندما يكون في صف أو تخطيط العمود. عند ضبط rowFlex ، سيتم لف الطفل Flexible ذات قيمة مرنة 5. وبالمثل ، يوفر columnFlex نفس السلوك لتخطيطات الأعمدة. ورثت التخطيطات من قيمة isRowColumn من ResponsiveRowColumn . 

 ResponsiveRowColumnItem (
        rowFlex : 5 ,
        columnOrder : 1 ,
        child : FeatureDetail (),
    )

تحدي استجابة آخر هو ترتيب العناصر. للتحكم في الترتيب المحدد للعناصر في صف أو تخطيط العمود ، قم بتعيين rowOrder أو columnOrder .

رفرفة في رفرفة

لقطات الشاشة

مذهل ، رفرفة داخل الرفرفة! إنه يعمل .. نوع من. لدى Iframes المدمجة في الويب Flutter بعض المشكلات.

الأفكار النهائية

Flutter Web هائلة وكان من الممتع حقًا حل بعض المشكلات الأساسية الأساسية للاستجابة على الويب. على الرغم من كل السنوات التي كنت أقوم بها على تطوير الويب ، فإن هذا القالب هو موقع الويب "الأكثر مثالية" التي أنشأتها على الإطلاق. بفضل قوة الإطار الأساسي ، أعرف بالضبط كيف ينظر التصميم إلى كل حجم.

Flutter Web ثوري ولكن لا يزال هناك الكثير من العمل للقيام به. في بعض المناطق ، يمتد Flutter بالفعل ولكن في حالات أخرى ، يتأخر النظام الإيكولوجي حرفيًا. من أجل التحديات المقبلة ، دعنا نتعامل معهم وجهاً لوجه وحل المشكلات الأساسية.

كما كشف بناء موقع الرفرفة هذا أيضًا عن بعض نقاط الألم. يرجى إعلامي إذا كنت تعمل أو كنت مهتمًا بمعالجة أحد العناصر أدناه.

  • محرر الرسوم المتحركة.
  • مولد RichText.
  • إطار التحليلات رفرفة.

شكر وتقدير ❤

إلهام:

رفرفة

تطوير:

  • راي لي

الراعي: لا يلي - تطبيق Flutter App UI ومواقع الويب باني



رخصة

قالب الموقع 

 BSD Zero Clause License

Copyright © 2020 Codelessly

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.

flutter.dev 

 Except as otherwise noted, the content of this repository is licensed under the
Creative Commons Attribution 3.0 License [1], and code samples are licensed
under the BSD License:

Copyright 2012, the project authors. All rights reserved. Redistribution and use
in source and binary forms, with or without modification, are permitted provided
that the following conditions are met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

[1] http://creativecommons.org/licenses/by/3.0/
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل