persistent header flutter

Add Answer | View In TPC Matrix

Technical Problem Cluster First Answered On January 3, 2022 Popularity 5/10 Helpfulness 4/10

Contributions From The Grepper Developer Community

Code Examples

flutter persistent header

TPC Matrix View Full Screen

flutter persistent header

Comment

import 'package:flutter/material.dart';
//Shohel Rana Shanto

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
      
    );
  }
}
class HomePage extends StatefulWidget {
  const HomePage({ Key? key }) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length:4 ,
      child: Scaffold(
        backgroundColor: Colors.white10,
        body: NestedScrollView(headerSliverBuilder: (context,_){
          return [
            SliverAppBar(
              leading: Icon(Icons.menu),
              actions: [
                Icon(Icons.notifications),
                Icon(Icons.search)
              ],
              
              title: Text(' Sliver Persistent Header'),
              backgroundColor: Colors.black87,
            
            ),
            SliverPersistentHeader(
              pinned: true, floating: true,
              delegate: MyTab())
          ];
        },
        
         body: TabBarView(children: [
           Container(color: Colors.green,child: GridView.count(crossAxisCount: 3,
           children: 
             List.generate(100, (index) => 
             Card(color:index%4==0?Colors.red:index%4==2?Colors.pink:index%4==1?Colors.yellow:Colors.blue,child: Text('Grid$index'),)
             )
           
           
           ),),
           Container(color: Colors.red,child: ListView.builder(
             itemCount: 6,
             itemBuilder: (context,index){
             return Card(
               
               child: ListTile(
                 title: Text('List$index'),
               ),
             );
           }),),
           Container(color: Colors.yellow,),
           Container(color: Colors.blue,),
         ]),
      
      ),
      ),
    );
  }
}

class MyTab extends SliverPersistentHeaderDelegate{
  @override
  Widget build(BuildContext context,double,bool) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [Colors.black,Colors.blue,Colors.black])
      ),
      
      child: TabBar(
        
        tabs: [
        Tab(text: 'Grid',height:100,),
        Tab(text: 'List',),
        Tab(text: 'Manush',),
        Tab(text: 'Shoytan',),
      ]),
    );
  }
  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    
    return true;
  }
  @override
  
  double  maxExtent = 110;
  @override
  
  double  minExtent = 50;
}

Popularity 5/10 Helpfulness 4/10 Language dart

Source: Grepper

Tags: dart flutter header persistent tabbar

Link to this answer
Share Copy Link

Contributed on Jan 03 2022

Angry Alpaca

6 Answers Avg Quality 8/10

persistent header flutter

Contents

Code Examples

Related Problems

TPC Matrix View Full Screen

flutter persistent header

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.