كيفية عرض صفحة فوق صفحة مع عمل تاثير ال blur للصفحه السابقه في flutter

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

android sdk manager تحميل flutter developers applications create app android android studio mac

Design main page

في الصفحة الرئيسيه لدينا list تحتوي على مجموعه من العناصر وعندما يكون ال index يساوي 1 يتم الانتقال الى صفحة اخرى او widget اخر مع عمل blur او تمويه لباقي العناصر كما هو موضح بالكود في الجزء الخاص بالـ bottomNavigationBar .

ui.dart


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

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black38,
      body:
          ListView(
            children: listModel.map((e) =>
                Container(
                    height: 100,
                    width: 100,
                    margin: const EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: Center(child: Text(e.name,style: TextStyle(color: Colors.white),)))).toList(),
      ),
          bottomNavigationBar:
          BottomNavigationBar(
            backgroundColor: Colors.black38,
            unselectedIconTheme: const IconThemeData(color: Colors.white),
            onTap: (index) {
              setState(() {
                currentIndex = index;
                if (index == 1) {
                  Navigator.push(context, TransparentRoute(builder: (context) => const TestPage2()));
                }
              });
            },
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
            ],
          )
    );
  }
}

How to Transparent Page

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

TransparentRoute.dart

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

class TransparentRoute extends PageRoute<void> {
  TransparentRoute({
    required this.builder,
    RouteSettings? settings,
  })  : super(settings: settings, fullscreenDialog: false);

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  Color get barrierColor => Colors.transparent;

  @override
  String get barrierLabel => '';

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 350);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    final result = builder(context);
    return FadeTransition(
      opacity: Tween<double>(begin: 0, end: 1).animate(animation),
      child: Semantics(
        scopesRoute: true,
        explicitChildNodes: true,
        child: result,
      ),
    );
  }
}

How to create page blur in Flutter

عند الانتقال الى العنصر الاخر سوف يكون من نوع backdropFilter وسوف نضع قيمة للتاثير مثلا 10 على محور x وايضا على محور y نفس القيمة وبعدها ارجع التصميم الذي ترغب به وبهذا تكون انتهيت من عمل تصميم التمويه على العناصر خلال عملية الانتقال في flutter بكل سهوله .

blur.dart


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

class TestPage2 extends StatelessWidget {
  const TestPage2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            width: 100,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  GestureDetector(
                    onTap: ()=> Navigator.pop(context),
                    child: Text('Close',style: TextStyle(color: Colors.black),),
                  ),
                  Divider(thickness: 2,color: Colors.black,),
                  Text('Flutter',),
                  Divider(),
                  Text('Java'),
                  Divider(),
                  Text('Python'),
                  Divider(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

شارك المقالة

كيفية عرض صفحة فوق صفحة مع عمل تاثير ال blur للصفحه السابقه في flutter