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

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

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

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

تثبيت flutter تحميل flutter dartsdk شركة تطبيقات الجوال

scroll_to_top

dependencies:

  scroll_to_top: ^0.0.5

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

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

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"),
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      );
}

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

• شرح كيفية تحديث flutter وDart الى احدث اصدار
• شرح كيفية عمل post للبيانات من نوع params داخل الapi في flutter
• شرح كيفية استخدام الapi مع repostery في Flutter وتنظيم الكود
• شرح كيفية التاكد من الاتصال بالانترنت وفي حالة عدم الاتصال اظهار صفحة عدم وجود انترنت
•  شرح كيفية تكبيره الصورة والتحكم في جميع تفاصيلها بواسطة flutter

تعديل المقال