close

Flutter : How to add a Header Row to a ListView

Image for post

A typical UI design utilized for classified records is utilizing a Sticky Header. Today we’ll utilize the sticky_headers bundle by Simon Lightfoot, to actualize an essential tacky header and a custom header that changes tone and size as it stalls out. Here’s a model.

Image for post

Add the package

sticky_headers: ^0.1.8

At that point set up the principle document so we have a HomeView to work with.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomeView(),
    );
  }
}
class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[900],
        ),
    );
  }
}

Basic Stick Header

We’ll add a ListView as the body of our Home Scaffold and do our business in there. The manner in which this library works is as per the following. You give a StickHeader gadget that falls headlong and one kid. So every header is related with just the youngster in the rundown. So for us, we’ll return a StickyHeader with the header as a compartment of stature 50, and blue tone. We’ll additionally set some content in the header to show the list. Also, for the substance, we’ll utilize a Column and create 5 dark compartments as the youngsters

return Scaffold(
      appBar: AppBar(backgroundColor: Colors.blueGrey[900],),
      body: ListView.builder(itemBuilder: (context, index) {
      return StickyHeader(
        header: Container(
          height: 50.0,
          color: Colors.blue,
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            'Header #$index',
            style: const TextStyle(color: Colors.white),
          ),
        ),
        content: Column(
          children: List<int>.generate(5, (index) => index)
              .map((item) => Container(
                    height: 50,
                    color: Colors.grey[(item + 1) * 100],
                  ))
              .toList(),
        ),
      );
    }));

This will deliver an outcome like beneath. A tacky header with a rundown of 5 things under it.

Image for post

Custom Sticky Header

Notwithstanding having the StickyHeader gadget where you can supply a Header youngster. You likewise have a StickyHeaderBuilder that you can use for some custom usefulness. The manufacturer restores the “stuckAmount” which will begin terminating when the header arrives at the staying point. The worth goes from 1 to – 1, 1 being at the lower part of the staying point, – 1 being over the staying point. We can utilize that incentive to make some cool impacts. What I need is for the headers to be large and afterward get more modest as they go into place, incredible for indicating a picture as the header and afterward contracting it down to an ordinary looking header with text in particular. I’ll likewise change the shading for emotional impact. To do this as opposed to utilizing a StickyHeader we’ll utilize a StickyHeaderBuilder.

ListView.builder(itemBuilder: (context, index) {
    return StickyHeaderBuilder(
      builder: (context, stuckAmount) {
        print('$index - $stuckAmount');
        stuckAmount = stuckAmount.clamp(0.0, 1.0);
        return Container(
          height: 100.0 - (50 * (1 - stuckAmount)),
          color: Color.lerp(Colors.blue, Colors.red, stuckAmount),
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text(
            'Title #$index',
            style: const TextStyle(color: Colors.white),
          ),
        );
      },
      content: Column(...)
    );
  }));

How about we go over what’s going on above. To start with, we need to brace the sum so it doesn’t go into the negatives. At that point we set our stature as far as possible size (100) and we take away the relative therapist tallness (50) in view of the stuck sum that is clasped and upset (deducted from 1). This will cause the contracting impact as the worth gets bigger. The exact opposite thing we do is change our shading from blue to red as the stuckAmount advances. This will create the outcome you see toward the beginning.

Check out some of the other Snippets for more Flutter goodness.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment