Hi, Devs it’s been a long time since I back with a new concept of the data table. Let’s learn how to create the custom data table in a flutter by using flutter widgets. In this story, we will create the very basic data table as shown in the above picture. For devs it’s so common feature to show their data in table format now it’s very easy to create your own, customized, complex, responsive, and nicely designed data table using a flutter build widget called DataTable.

Now Let’s head into the story of the widget and how exactly the widgets are used to create the data table in a flutter. Here below listed are the few widgets we need to build the data table.

• Datatable.
• Datacolumn.
• Datarow.
• Datacell.

These are the few widgets we need to build your data table. Let me explain each widget in deep.

1. DataTable

DataTable widget allows you to build a table that automatically sizes its columns according to what’s actually in the cells. if you need to give spacing in between columns and rows you can provide your own sizes using dataRowHeight: and columnSpacing: properties and you can add borders as like in the above picture, use border: also it will provide the default divider between each row.

Note: in this datatable to give the color we need use the material state color to provide color to datarow and dataheadingrow like below example

dataRowColor: MaterialStateColor.resolveWith((states) {
if (states == MaterialState.selected) {
return Colors.amber;
} else {
return Colors.brown;
}
}),

DataTable contains columns: and rows: property. The column takes an array of DataColumn and the rows take an array of DataRow. Each DataRow has a cells property that takes an array of DataCell.

2. DataColumn

This widget is used to provide the heading for each column that accepts the label: property we can provide any widget to that label property as you need like image, icons, etc.

3. DataRow

This widget is used to provide each row in the data table which accepts the cells: property takes an array of datacell widgets.

4. DataCell

DataCell takes the widget as a value. You can provide Text, Image, Icon, or any other widget. Even this widget accepts the function for tap, longpress, and many more.

Let’s Strat…….

Before starting, If you have a problem with creating a flutter project visit site. Once successfully created the new project create a file inside your project lib folder, datatable.dart in your project directory then, create the class with extended as a widget as you need like stateless or stateful. Use the DataTable widget as your root widget for your data table as same as below.

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: DataTable(),
);
}

Next, add a list of DataColumn for the column: property to provide a heading for the data table.

columns: const [
DataColumn(
label: Text("S/NO"),
),
DataColumn(
label: Text("First Name"),
),
DataColumn(
label: Text("Last Name"),
),
DataColumn(
label: Text("Salary"),
)
],

In the last, add the list of DataRow to rows: property and add the list of DataCell widgets to the DataRow property called cells:.

rows: [
DataRow( 
cells: [
DataCell(Text('1')),
DataCell(Text(‘fname’)),
DataCell(Text(‘lname’)),
DataCell(Text(‘sal’)),
],
);
]

NOTE: If your data table is large do not forget to wrap it with SingleChildScrollView To Avoid any horizontal space overflow in UI.

Hurrey, That’s it now you created your data table using flutter.

GitHub link: Click Here…

Thank you…

Hello Devs, let’s learn how to code your own custom intro screens without using any of the packages. In this introscreen story, we will use the page view widget, which is an inbuilt widget provided by the flutter team. It has many properties that help you to add customization as you needed for your flutter apps. This pageview can be used for most of the problems like image sliding, intro screen, showing steps, etc. Here you can add your own sliding effects, animations, your sliding indicators. I think this is the easiest and best way to implement the sliding problems with the best customization.

So, are you ready to make use of this Pageview widget for IntroScreen and how it can be used to make user-friendly apps?

Let’s Strat…….

Before starting, If you have a problem with creating a flutter project visit site. Once successfully created the new project create a file inside your project lib folder, youpagename.dart file. After creating a dart file create a stateful widget in your dart file and add the below variables.

late PageController _pageController;

int currentIndex = 0;

static const _kDuration = Duration(milliseconds: 300);

static const _kCurve = Curves.ease;

A page controller lets you manipulate which page is visible in a PageView.also lets you control the offset in terms of pages, which are increments of the viewport size. Continue to add the below code in youpagename.drat file.

@override

void initState() {

super.initState();

_pageController = PageController();

}

@override

void dispose() {

_pageController.dispose();

super.dispose();

}

onChangedFunction(int index) {

setState(() {

currentIndex = index;

});

}

nextFunction() {

_pageController.nextPage(duration: _kDuration, curve: _kCurve);

}

previousFunction() {

_pageController.previousPage(duration: _kDuration, curve: _kCurve);

}

Above code init function will initialize the pagecontroller, dispose function dispose the controller to improvise your memory consumption, Onchanged function is used to set the state of your current page index, Next and previous function are used to change the current page to next page and previous page.

class Indicator extends StatelessWidget {

final int? positionIndex, currentIndex;

const Indicator({Key? key, this.currentIndex, this.positionIndex})

: super(key: key);

@override

Widget build(BuildContext context) {

return Container(

height: 7,

width: 7,

decoration: BoxDecoration(

border: Border.all(color: Colors.transparent),

color: positionIndex == currentIndex ? Colors.black : Colors.grey,

borderRadius: BorderRadius.circular(100.r)),

);

}

}

The above widget is an indicator widget that shows the indicator for your pages. You customize the indicator as you needed by changing the properties.

Stack(

children: <Widget>[

PageView(

onPageChanged: onChangedFunction,

controller: _pageController,

children: [

//Here you can add you own customized pageview widgets as you //needed. If you didn't get how to use it i will add the code in //github please refer.

],

),

currentIndex != 2

? Positioned(

bottom: 80,

left: 168,

child: Container(

child: Row(

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

InkWell(

onTap: () => nextFunction(),

child: Text(

"Next",

style: TextStyle(

fontSize: 17,

fontWeight: FontWeight.w600,

color: AppColor.primary1),

),

)

],

),

),

)

: Container(),

Positioned(

bottom: 36,

left: 165,

child: Row(

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: <Widget>[

Indicator(

positionIndex: 0,

currentIndex: currentIndex,

),

SizedBox(

width: 10,

),

Indicator(

positionIndex: 1,

currentIndex: currentIndex,

),

SizedBox(

width: 10,

),

Indicator(

positionIndex: 2,

currentIndex: currentIndex,

),

],

),

),

]),

Use the stack widget as your parent widget for a better experience of movements and page transition view, even you can use any of the widgets as you needed, but the stack gives a better experience. Now you have your own customized introscreen for your application. If anything you know something better, feel free to add a comment.

Here is github project for you reference : Github link

Thank you…

Hello everyone, In this story will explain how to build the dated tabs with DefaultTabController. Best and easy customization can be done by changing your own data like month or week or day as you needed.

Example view:

Let’s start building dated tabs from scratch.

First, add the Intl package to your flutter project inside the pubspec.yml file under the dependencies.

intl package: click here

This package is used to customize the calendar parameter which is week, date, and year.

Now, create the page yourpagename.dart file inside your project create the stateful widget. Add the SingleTickerProviderStateMixin to your class, this mixin is used to control the tab controller and then add the below parameters to your class.

DateTime selectedDate = DateTime.now(); // current selected date

List<Widget> myTabs; // this is the list of dated tabs

List<Widget> tabView = List<Widget>(); // this is the tab view

List<DateTime> tabDate = []; // this is to add the dates for future

TabController tabController; // tab controller

The below-added function is to select the current date from the calendar.

Future<void> _selectDate(BuildContext context) async {

final DateTime picked = await showDatePicker(

context: context,

initialDate: selectedDate,

firstDate: DateTime(2015, 1), // previous limited date

lastDate: DateTime(2101)// End of your calender
);

if (picked != null && picked != selectedDate)

setState(() {

selectedDate = picked;

});

}

Next, add the tab controller function, call that function inside the initstate().

TabController getTabController() {

return TabController(length: 0, vsync: this);

}

void initState() {

tabController = getTabController();

super.initState();

}

After adding the controller you need to add the two widgets to generate the tab view, one is for the tabview and another is for generating the number of tabview.

Widget getWidget(DateTime date) {

return Center(

child: Text(“Date: $date”),

);

}

List<Widget> getWidgets() {

tabView.clear();

tabView = List.generate(tabDate.length, (index) {

return getWidget(tabDate[index]);

});

tabDate.clear();

return tabView;

}

Now, came into the main part of this story, generating the tabs and its’s data. List.generate function will generate the number of tabs and tab data view as needed. Add the below function inside the widget build.

final myTabs = List.generate(7, (index) {

var now = selectedDate; // current selected date

var date = DateTime(now.year, now.month, now.day + index); //get the //next date 

var day = DateFormat(‘d’).format(date); // this will get date          

var week = DateFormat(‘EEEE’).format(date);// this will get week

var weekname = week.substring(0, 3);// get the week string as three

var month = DateFormat(‘MMMM’).format(date).substring(0, 3);// month //string as three

tabDate.add(date);

//the below widget you can customize your own tab....

return Column(

children: [

Text(weekname),

Text(

day.toString() + ‘ ‘ + month,

style: TextStyle(fontSize: 10),

),

],

);

});

Here you are done with generating the tab view, tabs, and customizing the tab data. if want to format your own date, month and week you can visit the below-added link there you will find more examples on how to format the date in a flutter. Below you will find the complete code of dated tabs.

formating the date in a flutter: click here

import ‘package:flutter/material.dart’;

import ‘package:intl/intl.dart’;

class YourClass extends StatefulWidget {

@override

_YourClassState createState() => _YourClassState();

}

class _YourClassState extends State<YourClass>

with SingleTickerProviderStateMixin {

DateTime selectedDate = DateTime.now();

List<Widget> myTabs;

List<Widget> tabView = List<Widget>();

List<DateTime> tabDate = [];

TabController tabController;

Future<void> _selectDate(BuildContext context) async {

final DateTime picked = await showDatePicker(

context: context,

initialDate: selectedDate,

firstDate: DateTime(2015, 1),

lastDate: DateTime(2101));

if (picked != null && picked != selectedDate)

setState(() {

selectedDate = picked;

});

}

TabController getTabController() {

return TabController(length: 0, vsync: this);

}

void initState() {

tabController = getTabController();

super.initState();

}

Widget getWidget(DateTime date) {

return Center(

child: Text(“Date: $date”),

);

}

List<Widget> getWidgets() {

tabView.clear();

tabView = List.generate(tabDate.length, (index) {

return getWidget(tabDate[index]);

});

tabDate.clear();

return tabView;

}

@override

Widget build(BuildContext context) {

final myTabs = List.generate(7, (index) {

var now = selectedDate;

var date = DateTime(now.year, now.month, now.day + index);

var day = DateFormat(‘d’).format(date);

var week = DateFormat(‘EEEE’).format(date);

var weekname = week.substring(0, 3);

var month = DateFormat(‘MMMM’).format(date).substring(0, 3);

tabDate.add(date);

return Column(

children: [

Text(weekname),

Text(

day.toString() + ‘ ‘ + month,

style: TextStyle(fontSize: 10),

),

],

);

});

return DefaultTabController(

length: myTabs.length,

child: Scaffold(

appBar: AppBar(

bottom: TabBar(

tabs: myTabs,

),

actions: [

IconButton(

icon: Icon(Icons.date_range),

onPressed: () => _selectDate(context),

)

],

title: Text(“Matches”),

),

body: TabBarView(

children: getWidgets(),

),

),

);

}

}

Now you have your own customized dated tabs in your application. If anything you know something better, feel free to add a comment.

Complete project, Github link : click Here

Thank you…

What is obfuscate?

In general, obfuscate is making it difficult for humans to understand. Code obfuscation is the process of modifying an application binary code to make it harder for humans to understand. Obfuscation hides function and class names in your compiled code, this makes difficult for an attacker to reverse engineer your proprietary app.

Example of obfuscated code from a JAPH:

@P=split//,".URRUU\c8R";@d=split//,"\nrekcah xinU / lreP rehtona tsuJ";sub p{
@p{"r$p","u$p"}=(P,P);pipe"r$p","u$p";++$p;($q*=2)+=$f=!fork;map{$P=$P[$f^ord
($p{$_})&6];$p{$_}=/ ^$P/ix?$P:close$_}keys%p}p;p;p;p;p;map{$p{$_}=~/^[P.]/&&
close$_}%p;wait until$?;map{/^r/&&<$_>}%p;$_=$d[$q];sleep rand(2)if/\S/;print

For More example: https://en.wikipedia.org/wiki/Just_another_Perl_hacker

Before implementation of something, it is important know the advantages and disadvantages.

Pros and Cons of Obfuscate

Advantage

• Faster loading time
• Reduced memory usage
• Protection for trade secrets
• Prevention of circumvention
• Prevention of virus detection

Disadvantage

• obfuscation can make reading, writing, and reverse-engineering a program difficult and time-consuming,
• It adds time and complexity to the build process for the developers.
• Certain kinds of obfuscation can degrade performance and/or require Internet.

Implementation…

intro:

The following list describes which platforms support the obfuscation process described in this page:

Android/iOS : Supported as of Flutter 1.16.2. To obfuscate an app built against an earlier version of Flutter. Click here

macOS: macOS (in alpha as of Flutter 1.13), supports obfuscation as of Flutter 1.16.2

Linux/Windows: Not yet supported.

web: Obfuscation is not supported for web apps, but a web app can be minified, which is similar.

Flutter’s code obfuscation, when supported, works only on a release build.

For App Bundle:

Without splitting:

flutter build appbundle --obfuscate --split-debug-info=/<directory>

With Splitting:

flutter build appbundle --target-platform android-arm,android-arm64,android-x64 --obfuscate --split-debug-info=/<directory>

For APK:

Without splitting:

flutter build apk --obfuscate --split-debug-info=/<directory>

With Splitting:

flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi --obfuscate --split-debug-info=/<directory>

Works only for Flutter version v1.16.2 or higher.

To Know about <directory> see relative and folder path example

PS: About Splitting:
By default, fat apk contains arm v7, arm v8 and x64 which increases apk size, which you don’t want to. So, when you split it, you have separate binaries which you can upload on the store and thus reducing the size of the apk that a user would need to download.

These Below example is about the <directory> mentioned in above command.

Example using Relative Path:

flutter build apk --obfuscate --split-debug-info=./ProjectFolderName/debug

Example using Folder Path:

flutter build apk --obfuscate --split-debug-info=/Users/apple/Desktop/items/

If you still stuck on things see here : Click here

More Info about the obfuscate: Click here

Thank you…

If this article helped you a bit, learnt new thing please clap!

if you find anything that could be improved please let me know, I would love to improve.

In this article you will learn. How to setup the flutter apps as PWA for both Desktop and Mobile using flutter. Before Moving into the setup let’s learn about what is PWA? in a brief.

What is PWA (Progressive Web App)?

Progressive web apps is combination of application and web. It is intended to work on all the platform that uses the a standards-compliant browser, including both desktop and mobile devices. PWA look as standalone application but works on browser.

If you think about the native application and progressive web apps in terms of the capabilities and performance, Native applications are the best capabilities, whereas web apps represent the best of reach.

Why PWA?

A lot of companies are on progressive web apps to modernize there website and reach the user expectation. How?

There are some interesting facts user will be not satisfied with native application.

Users of native application hate the delay and unreliability on mobile. fifty percent of smartphone users are using company’s website for there day to day shopping because of the storage, they don’t want to install and also the updating apps for every time when its trigger update message.

When it’s come to the above facts PWA reach the user expectations. When user installs the PWA from website, whereas an installed PWA usually takes less than 1MB. According to those observations, we found out that users prefer experiences that are fast, installable, reliable, and engaging.

Flutter PWA benefits:

• Offline access — enables offline access to pages, since we can save the pages as apps
• Faster loading time — if done correctly, it provides us with 3x time performance
• App Like feel — with UI abilities and control provided by the flutter
• No App store submission required — users can add these apps from any website through their browsers
• Single code base — software developers can use the same code to ship a PWA, due to its cross-platform ability.

Let’s Setup PWA on flutter…..

There are many ways to develop PWA but Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX. Here you can deploy your flutter app on multiple platforms like Android, iOS, web.

Implementation

requirements : Flutter SDK and chrome must be installed in your local machine.

Setp1:

Before moving to creation of new flutter project make sure to run the below command. To get PWA support for flutter apps, you have to be on stable channel.

flutter channel stable
flutter upgrade
flutter doctor -v

Warning: Running flutter channel stable replaces your current version of Flutter with the stable version and can take time if your connection is slow. After this, running flutter upgrade upgrades your install to the latest stable. Returning to another channel (beta, dev, or master) requires calling flutter channel <channel> explicitly.

Confirm the chrome installation by running the below command. It will shown up the connected devices.

flutter devices

Step2:

Next step is to create the flutter project with web support. Don’t know how to create Flutter project see here, https://flutter.dev/docs/get-started/test-drive.

Create the flutter project with CLI run the below commands.

flutter create your_project_name
cd your_project_name

Run the below command to enable the web support for flutter apps.

flutter config --enable-web

If you want to enable the web for existing flutter project run the below command. if web is already exist skip this.

flutter create .

Note : Please don’t forget to run it with that dot(.) either you will get some errors

To serve your app from localhost in Chrome, enter the following from the top of the package:

flutter run -d chrome

The above command launches your flutter app on web. Once the app launches. web support is successful.

Step3:

This is the step where you do the exact PWA process in flutter. Here you will get one interesting fact, you need not do any changes in the code of flutter to make PWA. When you enable the web configuration in flutter apps it will already add the service workers to the app for run as PWA.

After that You need to run the command in your terminal to create a build folder, which is necessary to host your app on the web.

flutter build web

Note: You not able test your PWA on localhost. You have to deploy your web on server.

The above command will build the application and creates a directory called web inside the build folder. This will be the root folder for our project. Now we can make the necessary configuration changes in the manifest. Images, icons, themes can be changed as per required in the manifest file found in the web folder. After the above process, make sure that you are ready to deploy your application as PWA.

Step4: Deploy the app on Surge for test

What is Surge?

Surge is a static web publishing tool. It is widely used among Front-End Developers. Using surge is the best way for front end developers to publish static web applications into production. We can use surge to publish our PWA.

REQUIREMENTS:

• Install the latest version of node.js

Node.js Link to download CLI https://nodejs.org/en/

• Install surge using npm (node package manager)

on Windows — npm i -g surge
on Mac — sudo npm i -g surge

The above command installs surge globally on your system. Then after the installation move to web directory inside the build folder to deploy the web.

cd build
cd web

Run the below command inside the web directory to deploy your web on surge server.

surge

This will give us a live link deployed on surge. The link will be denoted as domain and will have a file extension .sh. Open this file in your browser to view the application.

To remove an app from surge, run surge teardown followed by the URL name.

surge teardown <the_url given by the surge with .sh extension>

Note: after all the process you will not appear the install button on URL bar that because of the URL given by surge. The url is in the form of http, PWA install button will not appear on the http url. Make sure to make the url as https://yourURL.sh

Now, you can run the URL on the web browser with https://yourURL.sh and it will take while to load wait for few second. Once the website is loaded the install button will appear on the right side of the URL bar on desktops and in mobile phones it will appear in the bottom of the browser as add to home screen.

For More info about the PWA Visit: https://web.dev/progressive-web-apps/

You did it.. Thank You…

If this article helped you a bit, found interesting and learnt new thing please clap!👏

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙