in this article we will build this UI with help of Pageview and GridView.

lets begin.

var currentPageValue = 0.0; // to get current pageview page
int totalGridItems=6; // total items per page
int startItem=0; // starting item index for each page
PageController controller = PageController(); // page view controller
bool isLastPage= false; // check if this is the last page
int? pages; // total number of pages
int? lastPageITems; //last page items number

you may notice a variable called pages we can simply calculate the number of pages by following line of code inside initState method:

pages = (context.read().categoryList.length /6).ceil(); //round app the division result

//context.read().categoryList this is the array of categories
// you can your own array here:)

then we use Pageview controller listener:

setState(() {
currentPageValue = controller.page!;

// the sarting item index is currentPageNumber * 6
// 6 is the toatal items per page :)
startItem = currentPageValue.toInt()*6;
isLastPage= currentPageValue.toInt()+1\==pages; // check if this is the last page

//calcuate the the number of items in the last page
// if the total array elements the less than 6(items per page) then assign 0
// otherwise we asign (List.length%6) this will give use the remaining number of items in the last page
//then check if we in the last page we will use this [lastPageITems] instead of items per page (6)

lastPageITems =
context.read().categoryList.length<6 ? 0: context.read().categoryList.length%6;

});
});

lets build indicator part then we will build the main pageview

Center(
child: Container(
height: 8,
width: pages!*15+ 20,
decoration: BoxDecoration(
color:Colors.grey,
borderRadius: BorderRadius.circular(50)),
padding: EdgeInsets.symmetric(horizontal: 10),

child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children:List.generate(pages!, (index) => Container(
width: 15,
decoration: BoxDecoration(
color:
currentPageValue.toInt()==index? //highlihgt current index
Theme.of(context).primaryColor: Colors.transparent,
borderRadius: BorderRadius.circular(50)),

)
),
),
),
)
],
)

i think nothing special in this piece of code :)

lets see how actual pageview and gridview look like.

PageView.builder(
controller: controller,
pageSnapping: false,
physics: BouncingScrollPhysics(),
itemBuilder: (context, position) {
// grid view will be here
},
itemCount: pages, // Can be null
),

GridView.builder(
shrinkWrap: true,

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemCount:

!isLastPage?
categoryProvider.categoryList.length<6?
categoryProvider.categoryList.length:
6 :lastPageITems,

itemBuilder: (BuildContext context, int index) {

// var cat = ccategoryList[index+startItem]

}

)

you may notice this line of code:

!isLastPage?
categoryProvider.categoryList.length<6?
categoryProvider.categoryList.length:
6 :lastPageITems,

the logic here is:

if this is not the last page , then if the array length is less then items per page( which is 6 ) then go with this array length as itemCount. otherwise we will use 6 as itemCount.

if this is the last page use lastPageItems as itemCount.

LastPage = if(List.length<6) 0 else List.length%6;

Ex. 17 % (6) = 5

5 items in the last page.

note: remember 6 is just my choice . you can choose any number of items per page.

var cat = ccategoryList[index+startItem]

in this line of code . we will get the current item. by using this equation:

index+ startItem

startItem is the starting index of current page.

if the number of items per page is 6 then:

page one : start by 0 and end by 5

page two : start by 6 and end by 11

and so on.

that’s it. thank you for reading.

check out this gits for full code

Google Analytics is a platform that collects data from your websites and apps to create reports that provide insights into your business.

so you can consider Google Analytics as a Business Intelligence tool that may help you to make some decision depend on Reports .

usually you can add google analytics plugin to your app and register many events . later you can see detailed reports based on this events and logs.

Google Analytics Events:

I. ad_impression

a user sees an ad impression, for app only

II. earn_virtual_currency

a user earns virtual currency (coins, gems, tokens, etc.)

III. join_group

a user joins a group to measure the popularity of each group

IIII. share

a user shares content

IV. begin_checkout

a user begins checkout

IIV. add_payment_info

a user submits their payment information

and so , on. there are much more events that related to ecommerce applications that can help in business measurement.

Adding Google Analytics to your flutter App:

1. make sure you are created a Firebase app and add firebase_core to your pubspec.yaml file. and follow all steps to enable Firebase in your project .
2. add analytics plugin with this command:

flutter pub add firebase_analytics

3. import the plugin wherever to want to log events.

import 'package:firebase_analytics/firebase_analytics.dart';

Start logging events:

After you have created a FirebaseAnalytics instance, you can begin to log events with the library's log- methods.

for example you can loop through your order items to log this event:

await FirebaseAnalytics.instance
.logBeginCheckout(
value: 10.0, //
currency: 'USD', // replace with your Currency
items: [ // items or products
AnalyticsEventItem(
itemName: 'Socks',
itemId: 'xjw73ndnw',
price: '10.0'
),
],
coupon: '10PERCENTOFF'
);

there are many methods other than this logBeginCheckout .

also you can add custom event .

await FirebaseAnalytics.instance.logEvent(
name: "share_image", // you can rename this
parameters: { // this object that hold data of your event
"image_name": name,
"full_text": text,
},)

so this is helpful tool if you want to measure your business and make right decision.

thanks for reading.

References:

[[GA4] Recommended events
Adding these events to your website or mobile app helps you measure additional features and behavior as well as…support.google.com](https://support.google.com/analytics/answer/9267735?hl=en "https://support.google.com/analytics/answer/9267735?hl=en")

[Get started with Google Analytics | Google Analytics for Firebase
Edit descriptionfirebase.google.com](https://firebase.google.com/docs/analytics/get-started?platform=flutter "https://firebase.google.com/docs/analytics/get-started?platform=flutter")