I was designing the UI for my mobile application, where I needed to use the Google "G" logo. However, the default icons provided by Flutter did not include an exact match. The closest option looked more like a search icon. After exploring the Flutter Icons API, I confirmed that there was no official Google/Gmail logo available.
I found an alternative solution by using the font_awesome_flutter package:
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Google Icon
FaIcon(
FontAwesomeIcons.google,
size: 60,
color: Colors.red,
),
SizedBox(height: 40),
// Gmail Icon
FaIcon(
FontAwesomeIcons.envelope,
size: 60,
color: Colors.red,
),
],
)However, I was not satisfied because:
- The icon lacked the original gradient shades of the Google logo.
- It didn't perfectly match Google's branding.
To get the exact Google "G" logo, I implemented it using CustomPainter in Flutter. This approach allowed me to accurately replicate the logo's shape, colors, and gradients.
I used CustomPainter to draw the Google "G" logo with precise color shading and arc rendering. Check out the code in this repository for the full implementation!
- Draws the Google "G" logo accurately.
- Uses
CustomPainterfor custom drawing. - Provides flexibility to adjust size and colors.
- Does not rely on external icon libraries.
- Clone the repository:
git clone https://github.com/Hifza-Khalid/google-logo-flutter.git
- Open the project in your preferred Flutter development environment.
- Run the app:
flutter run
- Developed & modified by Hifza 🌟🖌️
This project is open-source and available under the MIT License.