Flutter search bar with SilverAppBar

في

 Flutter search bar with SilverAppBar



في البداية دعونا نتعرف ماذا يعني Silver App Bar كما هو معلوم في ملف الشرح الخاص ب Silver App Bar .
تُستخدم Sliver AppBar عادةً كأول تابع لل Custom Scroll View ، والذي يسمح AppBar بالاندماج مع عرض التمرير بحيث يمكن أن يختلف في الارتفاع وفقًا لإزاحة التمرير أو يطفو فوق المحتوى الآخر في عرض التمرير. للحصول على App Bar ثابت الارتفاع أعلى الشاشة ، انظر App Bar ، والذي يتم استخدامه في Scaffold.appBar.كما يعرض AppBar كلن من toolbar ، leading ، title ، actions ، فوق الجزء السفلي (إن وجد). إذا تم تحديد عنصر واجهة مستخدم ك flexibleSpace، فسيتم تكديسه خلف شريط الأدوات والقطعة السفلية.

Sliver app bars are typically used as the first child of a CustomScrollView, which lets the app bar integrate with the scroll view so that it can vary in height according to the scroll offset or float above the other content in the scroll view.


لذلك إذا كنت تخطط لدمج SilverAppBar () في تطبيقك ك search bar with Silver App Bar ، وكنت قلقًا من مكان وضع شريط

البحث الخاص بالتطبيق ، فهذا الفيديو يناسبك! ستبدو النتيجة النهائية على النحو التالي.




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

SearchByHeader

import 'package:flutter/material.dart';
import 'package:search_provaider/color.dart';

class SearchByHeader extends SliverPersistentHeaderDelegate {
  static const routeName = '/SearchByHeader';

  final double flexibleSpace;
  final double backGroundHeight;
  final double stackPaddingTop;
  final double titlePaddingTop;
  final Widget subTitle;
  final Widget leading;
  final Widget action;
  final Widget stackChild;

  SearchByHeader({
    this.flexibleSpace = 120,
    this.backGroundHeight = 120,
    @required this.stackPaddingTop,
    this.titlePaddingTop = 35,
    this.subTitle,
    this.leading,
    this.action,
    @required this.stackChild,
  });

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    var percent = shrinkOffset / (maxExtent - minExtent);
    double calculate = 1 - percent < 0 ? 0 : (1 - percent);
    return SizedBox(
      height: maxExtent,
      child: Stack(
        children: <Widget>[
          Container(
            height: minExtent + ((backGroundHeight - minExtent) * calculate),
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [
                    ColorsConsts.starterColor,
                    ColorsConsts.endColor,
                  ],
                  begin: const FractionalOffset(0.0, 1.0),
                  end: const FractionalOffset(1.0, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
          ),
          Positioned(
            left: MediaQuery.of(context).size.width * 0.35,
            top: titlePaddingTop * calculate + 27,
            bottom: 0.0,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 24),
              width: MediaQuery.of(context).size.width,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  leading ?? SizedBox(),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Transform.scale(
                        alignment: Alignment.centerLeft,
                        scale: 1 + (calculate * .5),
                      ),
                      if (calculate > .5) ...[
                        SizedBox(height: 10),
                        Opacity(
                          opacity: calculate,
                          child: subTitle ?? SizedBox(),
                        ),
                      ]
                    ],
                  ),
                  Expanded(child: SizedBox()),
                  Padding(
                    padding: EdgeInsets.only(top: 14 * calculate),
                    child: action ?? SizedBox(),
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            top: minExtent + ((stackPaddingTop - minExtent) * calculate),
            child: Opacity(
              opacity: calculate,
              child: Container(
                width: MediaQuery.of(context).size.width,
                child: stackChild,
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  double get maxExtent => flexibleSpace;

  @override
  double get minExtent => kToolbarHeight + 25;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}




Our resurse:


AppBar-class


https://api.flutter.dev/flutter/material/AppBar-class.html

CustomScrollView-class


https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

SliverAppBar-class


https://api.flutter.dev/flutter/material/SliverAppBar-class.html




تعليقات

إرسال تعليق