Create a class that extends Decoration

class CustomTabIndicator extends Decoration {
final double indicatorHeight;
final Color indicatorColor;

const CustomTabIndicator({@required this.indicatorHeight, @required this.indicatorColor});

TabIndicatorPainter createBoxPainter([VoidCallback onChanged]) {
return new TabIndicatorPainter(this, onChanged);

Create Custom Painter

class TabIndicatorPainter extends BoxPainter {
final CustomTabIndicator decoration;

TabIndicatorPainter(this.decoration, VoidCallback onChanged)
: assert(decoration != null),

void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration != null);
assert(configuration.size != null);

Rect rect = Offset(offset.dx + 6, (configuration.size.height - decoration.indicatorHeight ?? 3)) &
Size(configuration.size.width - 12, decoration.indicatorHeight ?? 3);

final Paint paint = Paint();
paint.color = decoration.indicatorColor ?? Color(0xff292929); = PaintingStyle.fill;
canvas.drawRRect(RRect.fromRectAndCorners(rect, topRight: Radius.circular(8), topLeft: Radius.circular(8)), paint);

Use it like this

indicator: CustomTabIndicator(indicatorColor: AppColor.appGreenTextColor, indicatorHeight: 2)

I write articles for my own reference only, whenever I learn stuff, I make use of to keep note of what things I’m doing to make something work, so in future I can read it in my own words and solve my problem

  1. add dependencies

provider: ^3.1.0
shared_preferences: ^0.5.3+4flutter_localizations:
sdk: flutter

add asset in pubspec.yaml like this

- i18n/en.json
- i18n/gu.json

for example, en.json contains

"title": "Hello!",
"Message" : "This is English language"

and gu.json contains

"title": "નમસ્તે!",
"Message" : "આ ગુજરાતી ભાષા છે"

you can define all strings required for…

Flutter is a powerful tool-kit because it allow us to create build for almost all Operating Systems with single codebase

To build app for more than one platform, Responsiveness plays great role

So here I would like to write about responsive layout in flutter in short.

Device type used by users:

  • Mobile
  • Tablet
  • Desktop

We can create a Stateless Widget that allow us to write different layout with different screen size (i.e. Mobile, Tablet, Desktop) and declare three final widgets as below,

class Responsive extends StatelessWidget {final Widget mobile;final Widget tablet;final Widget desktop;}

Create constructor to allow users to build different…

In app development, buttons, cards or any thing else looks great if they are rounded slightly.

As of now, I came across with two methods mainly but there can be many methods we can round the borders of button or container or card

  1. BoxDecoration in Container
  2. ClipRRect Widget
  • First let’s start with BoxDecoration

inside Container decoration property, add the following

decoration:BoxDecoration(color: Colors.grey.shade200, shape:

as a child we can put any widget as you might know, so the full code for Container will look something like this

Container(margin: const EdgeInsets.all(6.0),decoration:BoxDecoration(color: Colors.grey.shade200, shape:,child: IconButton(icon…

Hi there, In some situation, it is necessary to identify network status on user’s device so that we can show them different screens based on they are online or offline OR they are using mobile data or wifi

To do so, we are going to make use of the connectivity: package


add this package in pubspec.yaml file and get package

declare a variable in which we will assign value according to network conditions

String _networkStatus = "Unknown"

create an object of Connectivity class which can be imported using connectivity package

Connectivity _connectivity = Connectivity();

now declare stream subscription


ThemeChanger class extended by ChangeNotifier

class ThemeChanger extends ChangeNotifier {ThemeData _themeData;ThemeChanger(this._themeData);getTheme() => _themeData;setTheme(ThemeData theme) {_themeData = theme;notifyListeners();}}

wrap MaterialApp with ChangeNotifierProvider

return ChangeNotifierProvider<ThemeChanger>(create: (_) => ThemeChanger(lightTheme), child: MaterialAppParent());}

create instance of Provider<ThemeChanger>

final theme = Provider.of<ThemeChanger>(context);

create a toggle button to switch themes

theme.getTheme() == lightTheme? IconButton(icon: Icon(Icons.ac_unit),onPressed: () {theme.setTheme(darkTheme);}): IconButton(icon: Icon(Icons.lightbulb_outline),onPressed: () {theme.setTheme(lightTheme);})

Cloud Firestore is an amazing service that can be used as a backend in websites or app and it serve data when client is offline and sync that data to server once client gets online

Here, I would like to present codes to perform CRUD in firestore using flutter aka dart programing.

  1. Set Data

It will create collection and document if not exists and here we are using Future because we are making network request here and as you probably know it may take some time.

Future addNote(String title, String description) async {DocumentReference docRef = Firestore.instance.collection(uid).document();await docRef.setData({"title"…

Required Packages

provider: ^4.3.1

cloud_firestore: ^0.13.7



Create instance of firebase auth:

final FirebaseAuth _auth = FirebaseAuth.instance;

create user model :

class User {final String uid;User({this.uid});}user_model.dart

custom user object based on our user model:

User _userFromFirebaseUser(FirebaseUser user) {return user != null ? User(uid: user.uid) : null;}

Sign in Anonymously

Future signInAnon() async {try {AuthResult result = await _auth.signInAnonymously();FirebaseUser user = result.user;return _userFromFirebaseUser(user);} catch (e) {print(e);return null;}}

Register and Login with Email and Password:

//Register in email and passFuture signUpWithEmailPass(String email, String password) async…

pipaliya ashish

I write articles for my own reference only. I use as my digital notebook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store