شارك المقالة

اضافة زر الصعود للاعلى اثناء الscroll الى الاسفل في فلاتر


اضافة زر الصعود للاعلى اثناء الscroll الى الاسفل في فلاتر

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


كان Flutter موجودًا منذ أن أطلقته Google لأول مرة في عام 2017 ، لكن الإثارة المحيطة به أصبحت مؤخرًا أكبر. إنها أداة مشتركة بين الأنظمة الأساسية تستخدم بنية حديثة ومتفاعلة لإنشاء تطبيقات Android و iOS من قاعدة رمز واحدة. يتم استخدام Dart ، وهي لغة برمجة أساسية موجهة للكائنات ، لإنشاء تطبيقات Flutter. السهوله والمكتبات في التصميم داخل Flutter ساعدته على الانتشار بشكل كبير . تتكون واجهة المستخدم الكاملة من العديد من عناصر واجهة المستخدم ، كل منها يحدد عنصرًا هيكليًا (مثل زر أو قائمة) ، وعنصر أسلوبي (مثل الخط أو نظام الألوان) ، وجانب التخطيط ، و قريباً. لا تستخدم Flutter أدوات OEM ، وبدلاً من ذلك تقدم أدواتها الخاصة الجاهزة للاستخدام والتي يبدو أنها أصلية في Android (تصميم المواد) أو تطبيقات iOS.




scroll_to_top


dependencies:

  scroll_to_top: ^0.0.5



اظهار واخفاء زر الصعود الى الاعلى اثناء scroll في التطبيق

حاول اولا ان تقوم بوضع التصميم الخاص بك بشكل كامل بداخل الScrollToTop وهو المسؤول عن عملية الصعود الى الاعلى ولن يظهر لك سوى بعد تثبيت المكتبه السابقه في المكان المخصص لها وبعدها تضع التصميم الذي ترغب به كما هو موضح بالكود التالي , يكون الcontroller الخاص بالlist هو الScrollController لكي يتتبع حركة الموقع وبعدها ينفذ عملية الصعود لاعلى بسهوله .


اظهار واخفاء زر الصعود الى الاعلى اثناء scroll في التطبيق


ui.dart


import 'package:flutter/material.dart';
import 'package:scroll_to_top/scroll_to_top.dart';

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

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> {
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[300],
      ),
      body: ScrollToTop(
        scrollController: _scrollController,
        child: buildListView(_scrollController),
      ),
    );
  }

  Widget buildListView(ScrollController scrollController) =>
      ListView.builder(
        controller: scrollController,
        physics: const BouncingScrollPhysics(),
        itemCount: 50,
        itemBuilder: (context, index) {
          return SizedBox(
            width: 20,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                height: 60,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.5),
                  color: Colors.red[100],
                ),
                child: Center(
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text("Index $index"),
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      );
}


لمزيد من المقالات

شاهد أيضًا
مقالات ذات صلة
شرح كيفية إنشاء جدول ببرنامج Orecal Sql عن طريق الكود – #تعلم_sql_بالعربي

 بسم الله الرحمن الرحيم السلام عليكم ورحمه الله وبركاته مرحبا بكم في مقال جديده من…

التاكد من وجود انترنت ومعرفة نوع الاتصال سواء واي فاي ام بيانات الهاتف في فلاتر

التاكد من وجود انترنت ومعرفة نوع الاتصال سواء واي فاي ام بيانات الهاتف في فلاتر…

شروحات أندرويد ستديو : كيفية نقل البيانات بإستخدام navigation component من فراجنت الى اخر عن طريق Android Studio

تعلمنا كيفية إنشاء fragment بالعربي من داخل برنامج اندرويد ستوديو Android Studio ، وربطهما معًا…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع