स्पंदन: AppBar और SliverAppBar ऊपर पंप

स्पंदन टूलबार बनाने के लिए अच्छी तरह से ज्ञात AppBar का उपयोग करता है, लेकिन जब हमें एक गतिशील टूलबार की आवश्यकता होती है जो स्वाइप करते समय सामग्री प्रदर्शित करता है, तो हम उत्कृष्ट SliverAppBar विजेट का उपयोग करते हैं।

दोनों विगेट्स आपको एप्लिकेशन को थोड़ा और सुंदर बनाने की अनुमति देते हैं, जो स्पंदन में, बिना किसी संदेह के, बहुत सरल है।

मैंने StackOverflow पर और Facebook समूहों में बहुत सारे प्रश्न देखे कि आप व्यवहार या डिज़ाइन के संदर्भ में AppBar और SliverAppBar को कैसे बदल सकते हैं।

आइए दो कार्यों को देखें।

टास्क 1

हम एक ऐसा AppBar बनाना चाहते हैं जो स्क्रीन के शीर्ष पर खराब न हो, लेकिन जैसा कि हम आम तौर पर नहीं करते हैं। हम एक दराज (साइड मेनू) जोड़ना चाहते हैं, जिसके उद्घाटन पर AppBar प्रतिक्रिया देगा। वह यह है: हमारे अपने AppBar   हमें जिन आयामों की आवश्यकता है।

समस्या यह है कि, जैसा कि हम जानते हैं, AppBar का डिफ़ॉल्ट आकार है, और हम इसे बदल नहीं सकते हैं। स्रोत कोड को देखने के बाद , हम स्कैफोल्ड में ऐपबार पैरामीटर देखते हैं, हम देखते हैं कि यह PreferredSizeWidget जैसे विजेट को स्वीकार करता है, अब हम AppBar स्रोत कोड को देखते हैं और पता लगाते हैं कि यह केवल Statefulbidget है जो PreferredSizeWidget को लागू करता है।

बिंदु छोटा है: बस अपना स्वयं का विजेट बनाएं जो PreferredSizeWidget को लागू करता है।

यही हम चाहते हैं

आप ऐसा कैसे करेंगे कि जब आप हमारे AppBar के मेनू बटन पर क्लिक करते हैं , तो एक साइड मेनू खुलता है।

हम इसे दो तरीकों से कर सकते हैं:

`AppBar` का उपयोग करना

यह कैसे AppBar पाड़ के अंदर साइडबार के उद्घाटन को नियंत्रित कर सकता है।

class Sample1 extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( drawer: Drawer(), appBar: MyCustomAppBar( height: 150, ), body: Center( child: FlutterLogo( size: MediaQuery.of(context).size.width / 2, ), ), ), ); } } class MyCustomAppBar extends StatelessWidget implements PreferredSizeWidget { final double height; const MyCustomAppBar({ Key key, @required this.height, }) : super(key: key); @override Widget build(BuildContext context) { return Column( children: [ Container( color: Colors.grey[300], child: Padding( padding: EdgeInsets.all(30), child: AppBar( title: Container( color: Colors.white, child: TextField( decoration: InputDecoration( hintText: "Search", contentPadding: EdgeInsets.all(10), ), ), ), actions: [ IconButton( icon: Icon(Icons.verified_user), onPressed: () => null, ), ], ) , ), ), ], ); } @override Size get preferredSize => Size.fromHeight(height); } 

एक कस्टम विजेट का उपयोग करना

यहाँ हमारे पास अधिक लचीलापन है और आप स्कैफोल्ड से GlobalKey जैसे ScaffoldState या InheritedWidget का उपयोग कर सकते हैं, इस प्रकार दराज खोलने के लिए राज्य के तरीकों तक पहुंच प्राप्त कर सकते हैं।

 import 'package:flutter/material.dart'; class Sample1 extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( drawer: Drawer(), appBar: MyCustomAppBar( height: 150, ), body: Center( child: FlutterLogo( size: MediaQuery.of(context).size.width / 2, ), ), ), ); } } class MyCustomAppBar extends StatelessWidget implements PreferredSizeWidget { final double height; const MyCustomAppBar({ Key key, @required this.height, }) : super(key: key); @override Widget build(BuildContext context) { return Column( children: [ Container( color: Colors.grey[300], child: Padding( padding: EdgeInsets.all(30), child: Container( color: Colors.red, padding: EdgeInsets.all(5), child: Row(children: [ IconButton( icon: Icon(Icons.menu), onPressed: () { Scaffold.of(context).openDrawer(); }, ), Expanded( child: Container( color: Colors.white, child: TextField( decoration: InputDecoration( hintText: "Search", contentPadding: EdgeInsets.all(10), ), ), ), ), IconButton( icon: Icon(Icons.verified_user), onPressed: () => null, ), ]), ), ), ), ], ); } @override Size get preferredSize => Size.fromHeight(height); } 

परिणाम

सरल, सही? आइए SliverAppBar के दूसरे कार्य को देखें ।

टास्क २

जैसा कि हम जानते हैं, SliverAppBar निम्नानुसार काम करता है:

हम जो चाहते हैं, वह हमारे SliverAppBar में निर्मित कार्ड को डालने के लिए है, जैसा कि निम्नलिखित आकृति में दिखाया गया है।

प्रतीक्षा करें, लेकिन SliverAppBar के अंदर की सामग्री क्रॉप है, इसलिए यह आगे नहीं जा सकता कि क्या करना है?

घबराहट के बिना, चलो SliverAppBar के स्रोत कोड को देखते हैं और, आश्चर्य की बात है, यह स्टेटफुलवेट है, जो SliverPersistentHeader के अंदर का उपयोग कर रहा है, यह संपूर्ण रहस्य है।

हम SliverPersistentHeader का उपयोग करने के लिए अपने स्वयं के SliverPersistentHeaderDelegate बनाएंगे ।

 class Sample2 extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Material( child: CustomScrollView( slivers: [ SliverPersistentHeader( delegate: MySliverAppBar(expandedHeight: 200), pinned: true, ), SliverList( delegate: SliverChildBuilderDelegate( (_, index) => ListTile( title: Text("Index: $index"), ), ), ) ], ), ), ); } } class MySliverAppBar extends SliverPersistentHeaderDelegate { final double expandedHeight; MySliverAppBar({@required this.expandedHeight}); @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { return Stack( fit: StackFit.expand, overflow: Overflow.visible, children: [ Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", fit: BoxFit.cover, ), Center( child: Opacity( opacity: shrinkOffset / expandedHeight, child: Text( "MySliverAppBar", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w700, fontSize: 23, ), ), ), ), Positioned( top: expandedHeight / 2 - shrinkOffset, left: MediaQuery.of(context).size.width / 4, child: Opacity( opacity: (1 - shrinkOffset / expandedHeight), child: Card( elevation: 10, child: SizedBox( height: expandedHeight, width: MediaQuery.of(context).size.width / 2, child: FlutterLogo(), ), ), ), ), ], ); } @override double get maxExtent => expandedHeight; @override double get minExtent => kToolbarHeight; @override bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true; } 

परिणाम

हो गया, दोनों कार्य हल हो गए।

उदाहरण इस भंडार में हैं ।

निष्कर्ष

अक्सर हमें निराशा होती है जब हमें विजेट के कोई गुण नहीं मिलते हैं, लेकिन आपको यह समझने के लिए इसके स्रोत कोड को देखने की आवश्यकता है कि यह फ़्लटर में कैसे लागू किया जाता है, इस प्रकार यह पता चलता है कि हम अपने स्वयं के विजेट को कैसे लागू कर सकते हैं।