Skip to main content

Drawer in Flutter

 Drawer is one of the main component of an application. It is like a package which can be used for following purposes at a single place- 

1. Navigate users to different pages.

2. Login 

3. LogOut

4. Settings

5. Contact Page


Drawer makes it easy to work with any application. It's important for making the User experience more easier.


Prerequisties - 

Create assets folder and add user.png image in it. Don't forget to add assets folder in pubspec.yaml otherwise it will cause errors.

Let's see code in flutter for Drawer-


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Drawer demo"),
          
        ),
      drawer: Drawer(
          child: Column(
            children: <Widget>[
             Stack(
               children: [
                
                 Container(
                   margin: EdgeInsets.only(top: 60,right: 150),
                   color: Colors.white,
                   child: Image.asset("assets/user.png"),
                   width: 100,
                   height: 100,
                 ),
                 Positioned(
                   right: 0,
                   top: 60,
                   child:  Text("Cool Trends",style: TextStyle(color: Colors.black,fontSize: 20,fontWeight: FontWeight.w600),)
              ,),
              Positioned(
                top: 80,
                right: 0,
                child: Text("cooltrends@gmail.com",style: TextStyle(color: Colors.black,fontSize: 15,fontWeight: FontWeight.w500),),
              )
                 ],
             ),
             SizedBox(height: 60,),
              ListTile(
                leading: Icon(Icons.account_circle),
                title: Text("Account"),
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text("Settings"),
              ),
              ListTile(
                leading: Icon(Icons.lightbulb_outline),
                title: Text("InSight"),
              ),
              ListTile(
                leading: Icon(Icons.feedback),
                title: Text("FeedBack"),
              )
            ],
          ),
        ),
      ),
    );
  }
}


This is drawer we created using this code -






Labels:

Comments

Post a Comment

Popular posts from this blog

List of Questions asked by Morgan Stanley

  Coding Questions -  1.  .   Exchange kth node from start and kth node from end of a singly linked list. 2.    Given a number, you have to find next greater number which has same set of digits. 3.    Given a binary tree, you have to print level order traversal of the tree (left child then right child) but every next level has to be printed in next line. 4.    Longest Common Substring 5.    Spiral level order traversal 6.    Add two linked lists 7.    Write a function to find the mirror image of binary tree 8.    WAP to find the character which occurred maximum times in the character array 9.  Given a 2d matrix find an element in a matrix which is 0 and make the entire row and column to 0 10.  Find the minimum element in the rotated array of integers 11.  Find highest length substring such that there are equal number of 0’s and 1’sin array of 1’s and 0’s only 12.  Given a dictio...
Post a Comment
Read more

Which is best: LeetCode vs HackerEarth ?

  Well, all the platforms almost are same except the interface. That's what I think. To conclude the result, let's compare them through the features they offer.  Features of Leetcode -  Topic - wise questions Comapny-wise questions Weekly contests Interview Preparation section Discuss section Features of HackerEarth Topic-wise problems Monthly contests Discuss section Hiring Contests Hackathons Earlier, when I started coding in my first year. I was fond of HackerEarth. But when I stoped using hackerearth and shifted to Leetcode, I like it more. It depends upon how much comfortable you are with the interface. But, it can't be denied that Leetcode offer more than HackerEarth. But for the coders who love hackathons, HackerEarth is best for them and for the people looking out for job opportunities. Do share your favorite through comments!
Post a Comment
Read more

Top Questions asked by Facebook

                  Facebook is the dream company of almost every software engineer. If you are doing interview preparation, you can't skip the must do coding questions for Facebook. Facebook is the product-based company and tests the candidate on data structures and algorithms, and logical questions. The coding level is a bit tough, but you can do it with your hard work. Below is the list of coding questions you must prepare before sitting for Facebook. Smallest string which not a subsequence of the given string Maximum length possible by cutting N given woods into at least K pieces Count possible decodings of a given Digit Sequence | Set 2 Find the maximum path sum in a binary tree   Maximize profit for buying and selling stock given a series of price vectors Given  m  sorted arrays, find the  k- th smallest value Binary search in a sorted, rotated array Given a string, check if it is a palindrome  by ignoring spaces....
Post a Comment
Read more