Posts

Showing posts from November, 2020

Circular Menu Flutter

Image
This type of  Circular menu can be created using circular_menu package . now the current version is ^1.1.2 . Take the latest version from  Here dependencies: circular_menu: ^1.1.2 just add the dependency into pubspec.yaml file  and run pub get. make sure there is no error in the terminal . now import the package into the dart file. import 'package:circular_menu/circular_menu.dart' ; Now we can use this circular menu . important point: CircularMenu() has to be used in the body .onTap function is also very important . If you don't have any function then make it blank. body: CircularMenu(               alignment: Alignment.bottomCenter,               toggleButtonColor: Colors.pink,               items: [                 CircularMenuItem(                     icon: Icons.home, ...

Using Google Fonts

Image
Limited number of fonts are available in the Flutter. But we can use as many type of fonts we want from google.  The font of the appbar is created from google fonts at first download the font file of your choice from Google Fonts  . you will get a zip file . In that zip file there will be one (TrueTypefontfile) and another one will be a text file that's actually the license . Now make a directory in your flutter project (name that file as "fonts" that will be helpful) now drag that TrueType fontfile into the fonts directory .Our font file is now ready to use. Now we have to open the pubspec.yaml . .Indentation is really important for the pubspec.yaml file. so just copy paste it under flutter: fonts : - family : AbrilFatface fonts : - asset : fonts/AbrilFatface-Regular.ttf Now make sure the indentation gap between flutter: and fonts: is 2. This is really important. Change the family and asset according to the file name. (file name is supposed to be like "some...

Bottom Navigation Bar

Image
  This type of navigation bar can be achieved without using any library. BottomNavigationBar() Widget is already present in flutter. In Scaffold , we got a property named  bottomNavigationBar .  Make sure to change to type ( type: BottomNavigationBarType. fixed) This is a part of a code : bottomNavigationBar: BottomNavigationBar ( type: BottomNavigationBarType. fixed , backgroundColor: Colors. pink , fixedColor: Colors. cyanAccent , currentIndex: 0, items: [ BottomNavigationBarItem (icon: Icon (Icons. home_outlined ),label: 'Home' ), BottomNavigationBarItem (icon: Icon (Icons. notifications_active_outlined ), label: 'Notifications' ), BottomNavigationBarItem (icon: Icon (Icons. event ),label: 'calender' ), BottomNavigationBarItem (icon: Icon (Icons. menu ),label: 'More' ), Now The buttons will be visible but you will not be able to change the selected button . That means after press also the button will not be selected. for that we have...