Are you tired of the same old Flutter drawer design? Do you want to elevate your app’s UI game with a touch of elegance? Look no further! In this article, we’ll guide you through the process of creating a stunning Flutter drawer with a white underline logo that will leave your users in awe.
What You’ll Need
Before we dive into the tutorial, make sure you have the following requirements checked:
- Flutter installed on your machine (version 2.0 or later)
- A new or existing Flutter project set up
- A basic understanding of Flutter and Dart programming language
Laying the Foundation: Creating the Drawer
The first step in creating our custom Flutter drawer is to create a basic drawer structure. Open your Flutter project and navigate to the `lib` directory. Create a new file called `custom_drawer.dart` and add the following code:
import 'package:flutter/material.dart';
class CustomDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text('Drawer Header'),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Navigate to item 1 route
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Navigate to item 2 route
},
),
],
),
);
}
}
This code creates a basic Flutter drawer with a header and two list tiles. We’ll customize this later to add our white underline logo.
Designing the Logo
For our logo, we’ll use a simple icon with a white underline effect. You can use any icon font or image you like, but for this example, we’ll use the Material Design Icons font. Create a new file called `logo_widget.dart` and add the following code:
import 'package:flutter/material.dart';
class LogoWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Icon(
Icons.home,
color: Colors.white,
size: 24,
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
'App Name',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
Container(
width: 24,
height: 2,
margin: EdgeInsets.only(top: 18),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(2)),
),
),
],
),
);
}
}
This code creates a simple logo widget with a home icon, app name text, and a white underline effect. We’ll integrate this into our custom drawer later.
Underline Effect Explained
So, how does the underline effect work? The magic happens in the `Container` widget, where we define the underline shape and color. The `BorderRadius` property is used to add a slight curve to the underline, giving it a smooth finish. You can adjust the `height` and `margin` properties to customize the underline’s appearance.
Integrating the Logo into the Drawer
Now that we have our custom logo widget, let’s integrate it into our custom drawer. Go back to the `custom_drawer.dart` file and update the code as follows:
import 'package:flutter/material.dart';
import 'logo_widget.dart';
class CustomDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: LogoWidget(), // Add the logo widget here
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Navigate to item 1 route
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Navigate to item 2 route
},
),
],
),
);
}
}
By replacing the `DrawerHeader` child with our custom `LogoWidget`, we’ve successfully integrated the logo into our custom drawer.
Adding the Finishing Touches
Our custom drawer is taking shape, but we need to add some finishing touches to make it truly stand out. Let’s add some custom colors and typography to elevate the design.
Custom Colors
Create a new file called `theme.dart` and add the following code:
import 'package:flutter/material.dart';
class AppTheme {
static ThemeData get lightTheme => ThemeData(
primaryColor: Color(0xFF4CAF50),
accentColor: Color(0xFF8BC34A),
scaffoldBackgroundColor: Color(0xFFf7f7f7),
);
}
In this example, we’ve defined a custom theme with three colors: primary, accent, and scaffold background. You can adjust these values to match your app’s brand.
Typography
Let’s define a custom typography style to use throughout our app. Update the `theme.dart` file with the following code:
class AppTheme {
// ...
static TextStyle get titleStyle => TextStyle(
fontFamily: 'OpenSans',
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
);
static TextStyle get subtitleStyle => TextStyle(
fontFamily: 'OpenSans',
fontSize: 14,
color: Colors.white70,
);
}
In this example, we’ve defined two custom typography styles: `titleStyle` and `subtitleStyle`. You can adjust these values to match your app’s typography guidelines.
Putting it All Together
Now that we have our custom drawer, logo, and theme set up, let’s put it all together in our `main.dart` file:
import 'package:flutter/material.dart';
import 'custom_drawer.dart';
import 'theme.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: AppTheme.lightTheme,
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
drawer: CustomDrawer(), // Add the custom drawer here
body: Center(
child: Text('Welcome to Flutter!'),
),
),
);
}
}
Run your app, and you should see a beautifully designed Flutter drawer with a white underline logo.
Conclusion
In this article, we’ve covered the process of creating a custom Flutter drawer with a white underline logo. By following these steps, you can elevate your app’s UI and provide a unique user experience. Remember to experiment with different design elements and typography styles to make your app truly stand out.
Flutter Version | Tested On |
---|---|
2.0.0 | Android 11, iOS 14.4 |
If you have any questions or need further assistance, please don’t hesitate to ask in the comments below.
Happy coding!
Frequently Asked Question
Get the answers to the most frequently asked questions about Flutter drawer logo with a white underline!
How do I add a logo to my Flutter drawer?
To add a logo to your Flutter drawer, you can use the `DrawerHeader` widget and wrap your logo inside it. For example, `
Why is my logo not displaying in the Flutter drawer?
If your logo is not displaying in the Flutter drawer, check if you’ve added the image to the `assets` section in your `pubspec.yaml` file. Also, make sure the image path is correct and the image is not corrupted.
How do I make the underline of my Flutter drawer logo white?
To make the underline of your Flutter drawer logo white, you can use the ` decoration` property of the `Drawer` widget and set the `borderBottom` property to a `Border` object with a white color. For example, `Drawer(decoration: BoxDecoration(borderBottom: BorderSide(color: Colors.white))`.
Can I customize the size of my Flutter drawer logo?
Yes, you can customize the size of your Flutter drawer logo by wrapping the logo image with a `Container` widget and setting the `width` and `height` properties. For example, `Container(width: 50, height: 50, child: Image.asset(‘assets/logo.png’))`.
How do I center my Flutter drawer logo vertically?
To center your Flutter drawer logo vertically, you can wrap the logo image with a `Center` widget or set the `alignment` property of the parent widget to `Alignment.center`. For example, `Center(child: Image.asset(‘assets/logo.png’))` or `Container(alignment: Alignment.center, child: Image.asset(‘assets/logo.png’))`.