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

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


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…

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…

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…

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)…

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