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




إرسال تعليق

0 تعليقات

Contact Us