DEV Community: Maadhav

Flutter Drawer with Custom Icon

Maadhav — Sat, 15 Aug 2020 04:06:30 +0000

Hello guys, this blog post is a part of a video series we have started to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:

In this video, we will have a look at how to create a Drawer with a Custom Icon in Flutter.

So before we customize the icon, lets just build the default Drawer.

Now in our Scafdfold(), there is a parameter named as drawer:

Let's pass the Drawer() widget to this parameter.



drawer: Drawer(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 30,
              ),
              DrawerHeader(
                child: Container(
                    height: 142,
                    width: MediaQuery.of(context).size.width,
                    child: Image.asset(
                      "assets/images/ten_news.png",
                    )),
                decoration: BoxDecoration(
                  color: Colors.transparent,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    currentIndex = 3;
                  });
                  Navigator.of(context).pop();
                },
                child: Text(
                  'Profile',
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 45,
              ),
              GestureDetector(
                onTap: () {},
                child: Text(
                  'Settings',
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 45,
              ),
              Text(
                'About',
                style: TextStyle(
                  fontFamily: 'Avenir',
                  fontSize: 24,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 45,
              ),
              Text(
                'Log Out',
                style: TextStyle(
                  fontFamily: 'Avenir',
                  fontSize: 24,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 45,
              ),
              Expanded(
                  child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: 65,
                  width: MediaQuery.of(context).size.width,
                  color: Colors.black,
                  child: Center(
                    child: Text(
                      'v1.0.1',
                      style: TextStyle(
                        fontFamily: 'Avenir',
                        fontSize: 20,
                        color: const Color(0xffffffff),
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ))
            ],
          ),
        ),

Now above, inside the Drawer() widget, in the child parameter, we have a passed a Column()

This is just used for the sake of inserting multiple widgets in my drawer.

There is also a widget named, DrawerHeader.
This widget is used for displaying any content on top of the whole drawer. This widget comes with a default divider. We have passed our app logo to it.

Now where is the drawer?

In order to see the drawer, we need to also pass the AppBar() to our Home Page's Scaffold().



Scaffold(
   appBar: AppBar()
);

After building the current project we can see the default hamburger Icon in our AppBar. Pressing on it our drawer opens.

How to Exit the Drawer On Press of a Button?

I order to close the drawer manually i.e on the press of a button, we only need to return the Navigator.of(context).pop() to exit the Drawer.

So let's also add a button on our Drawer.



Material(
                borderRadius: BorderRadius.circular(500),
                child: InkWell(
                  borderRadius: BorderRadius.circular(500),
                  splashColor: Colors.black45,
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.black,
                    child: Icon(Icons.arrow_back, color: Colors.white),
                  ),
                ),
              ),

Now on pressing the button the drawer closes.

How to change the default Hamburger Icon?

This question had arrived in my mind on the first day I had learned to build a Drawer in Flutter.

Now in order to have a custom Icon, lets remove the default one first.



 AppBar(
        automaticallyImplyLeading: false,
),

automaticallyImplyLeading set to false would just remove the default icon.

Now let's pass out Icon to either leading: or title: parameter.



appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Padding(
          padding: EdgeInsets.symmetric(horizontal: 25),
          child: Builder(
            builder: (context) => IconButton(
              icon: SvgPicture.asset(
                "assets/icons/drawer.svg",
                height: 15,
                width: 34,
              ),
              onPressed: () => Scaffold.of(context).openDrawer(),
            ),
          ),
        ),
        backgroundColor: Colors.white,
        elevation: 0,
        centerTitle: false,
        titleSpacing: 0,
      ),

Now in the above code, there are a few importing things:

Builder(): We use a Builder class to pass the context of the Scaffold widget to a particular widget. More Info: https://stackoverflow.com/a/52123080/6484719
Scaffold.of(context).openDrawer(): This is why used the builder widget, to get the current context of the scaffold and then open the drawer.

Finally, our output:

👨‍💻Source Code: https://github.com/Code-Decoders/ten_news_yt/tree/Part-2--Drawer

Code-Decoders / ten_news_yt

ten_news

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

💐Join Our Slack Group: https://bit.ly/JoinSlackCD

✌Subscribe to CodeDecoders: http://bit.ly/CodeDecoders

💮Design Link: https://xd.adobe.com/view/99205dd3-7fe4-44bb-9edd-dd2a75290cbf-cc73/screen/90d0c71c-26b7-44d1-b29d-6578cbd87884

🤝Developed by
Maadhav Sharma:
🌐 https://maadhav.github.io/
🐤 https://twitter.com/maadhav_sharma
📘 https://www.facebook.com/maadhav2001
📷 https://www.instagram.com/maadhav_sharma/
Kunal Jain:
📷 https://www.instagram.com/jainkunal528

Bubble Bottom Bar Flutter

Maadhav — Sun, 09 Aug 2020 03:31:14 +0000

Hello guys, this blog post is a part of a video series we are starting to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:

In this blog post, we will have a look at a package that allows us to create a customizable bottom navigation bar.

So now first open our project and create a home.dart file.

Now let's create a StateFull Widget named as Home().

Home would return a Saffold().

In the Scaffold there is a parameter, bottomNavigationBar:
Instead of returning the default BottomNavigationBar widget which is provided by Flutter, we would use a package, bubble_bottom_bar.

Add this to your package's pubspec.yaml file:

...
dependencies:
  bubble_bottom_bar: ^1.2.0

Now in your Dart code, you can use:

import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

Now in the bottomNavigationBar: pass BubbleBottomBar()

As in our app, we don't need any background shade behind the selected item, we would keep the opacity to 0.

bottomNavigationBar: BubbleBottomBar(
        opacity: 0,
        ...
      ),

Now we also need to declare a variable in which we will be storing the current index.

int currentIndex = 0;
.
.
currentIndex: currentIndex,

Now in the onTap() parameter, we need to pass a function that would update the currentIndex.

  void changePage(int index){
    setState(() {
      currentIndex = index;
    });
  }
.
.
onTap: changePage,

Now the most important thing is the items: parameter.

As seen in the image above the items needs a List of BubbleBottomBarItems.

So, our first item:

BubbleBottomBarItem(
              backgroundColor: Colors.black,
              icon: SvgPicture.asset(
                'assets/icons/home.svg',
                width: 21,
                color: Colors.black54,
                height: 21,
              ),
              activeIcon: SvgPicture.asset(
                'assets/icons/home.svg',
                width: 21,
                color: Colors.black,
                height: 21,
              ),
              title: Text("Home")),

Three out of the four items in our app are similar, but the fourth item does not need an activeIcon as its the image of the user. So for the fourth item.

BubbleBottomBarItem(
              backgroundColor: Colors.black,
              icon: Container(
                height: 24,
                width: 24,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(image: AssetImage('assets/user.png')),
                  boxShadow: [
                    BoxShadow(
                        color: Color(0x5c000000),
                        offset: Offset(0, 1),
                        blurRadius: 5)
                  ],
                ),
              ),
              title: Text("Profile")),

Now lets see the final output...

Full Source Code:

A Short Tutorial on How to Develop a Switch button in Flutter.

Maadhav — Sat, 11 Apr 2020 12:09:53 +0000

A Short Tutorial on How to Develop a Switch button in Flutter.

Flutter Switch is used to toggle a setting between on/off which is true/false respectively.

When the switch is on, the value returned by the Switch onChanged property is true, while the switch is off, onChanged property returns false.

In the following example Flutter application, we defined a Switch widget. Whenever the Switch is toggled, onChanged is called with new state of Switch as value.

We have defined a boolean variable isSwitched to store the state of Switch.

Create a basic Flutter application and replace main.dart with the following code.

main.dart

Complete Source Code…

I have started this new series named Flutter Shorts in which I will share some simple and useful tutorials related to Flutter Widgets.

So Stay Tuned for more…

Learning Flutter without knowing any other language.

Maadhav — Thu, 30 Jan 2020 12:22:20 +0000

As a student, I always wanted to be able to develop complex applications and upload them to the Play Store. So I started learning core java for developing apps on Android as it is the most popular platform for mobile apps. I started by choosing a free course on Udacity but after one month I realized that instead of understanding the logic behind the program, I was just copying and pasting which was being shown in the video tutorial. This is what happens with almost every absolute beginner. After that one month, I lost my interest in making applications using Java.

How did Flutter brought my interest back?

So after 2 years, I thought to find a more interesting way to develop apps.
At that time flutter had just entered. After reading about its features I got excited to learn it.
Meanwhile, in the past 2 years, I had learned C++ basics in my school.
As I was a beginner I wasn't good at reading and understanding the Official Documentation. So opted for buying a course this time rather than picking a free course from YouTube.

If one wishes to learn flutter, learning DART is a pre-requisite. As I mentioned I had the basic knowledge of C++, so I had enough knowledge about OOPs. After trying to write simple programs using Dart I got a good grip on it. As a beginner, I only needed to know how variables, functions, and classes are declared in Dart, rest advanced concepts like Future, Factory, etc. can be learned alongside learning Flutter.

Now after following the video tutorial, I was able to understand almost everything. The assignments which my tutor used to give me acted like DIY tasks for me, it enabled me to think on my own rather than spoon-feeding. The flutter documentation and the videos uploaded on their channel helped me of learning all the widgets. Concepts like a database with sqflite were tough to understand but doing regular practice gave me a hold of it.

Then I started a YouTube Channel, where I uploading my own videos on different UI concepts. The main aim of these videos was to increase my practice and inspire some other beginners to start with flutter. All the steps above helped me keep practicing flutter.

As a side project, I started to develop a news app. Making it was really fun and useful. I completed my project names as TEN News and uploaded it on google play store. The whole journey made me continuously learn new things related to flutter. Do check out my App from the Play Store: TEN News

Conclusion

So if you want to start learning flutter as a beginner the first and very important thing you need to know is the concept of OOP(Object Oriented Programming). For that, you can choose to learn C++ or any other programming language which came after it.

Now opt for a Flutter course. As mentioned above, paying for a course makes you keep going. So I would advise you to select a paid course.

Make sure that you follow a routine when learning from a course.

After your course is completed start developing small projects just for fun or start a YouTube channel to showcase your apps. You can even join people on Slack, Discord where people make a team and work on different projects. I had contributed to an open-source flutter project which helped me. I also learned that how the presentation of our code matters.

Some Useful Links

Flutter Docs
Recommended Flutter Course

Wanna get in contact with me? Here are the links. 😊

Twitter
Facebook
Instagram
or just mail me at maadhav2001@gmail.com