https://github.com/hifza-khalid/google-logo-flutter

A Flutter project that 🎨 accurately replicates the Google "G" logo using CustomPainter, providing ✨ flexibility in size, 🎨 colors, and 🌈 gradients.
https://github.com/hifza-khalid/google-logo-flutter

custompainter dart flutter flutter-ui google-logo mobile-development ui-design vector-drawing

Last synced: 2 months ago
JSON representation

A Flutter project that 🎨 accurately replicates the Google "G" logo using CustomPainter, providing ✨ flexibility in size, 🎨 colors, and 🌈 gradients.

• Host: GitHub
• URL: https://github.com/hifza-khalid/google-logo-flutter
• Owner: Hifza-Khalid
• Created: 2025-03-01T07:32:28.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-01T08:10:51.000Z (over 1 year ago)
• Last Synced: 2025-03-01T08:26:29.263Z (over 1 year ago)
• Topics: custompainter, dart, flutter, flutter-ui, google-logo, mobile-development, ui-design, vector-drawing
• Language: C++
• Homepage: https://github.com/Hifza-Khalid/Google-logo-flutter
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Google Logo Flutter 🎨📱

## Problem Statement 🚀

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](https://api.flutter.dev/flutter/material/Icons-class.html), I confirmed that there was no official Google/Gmail logo available.

### Initial Attempt ❌

I found an alternative solution by using the `font_awesome_flutter` package:

```dart

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,

    ),

  ],

)

```

### Output Image 📸

![Google Icon Output](https://github.com/Hifza-Khalid/google-logo-flutter/blob/main/screenshots/Google1.JPG)

However, I was not satisfied because:

1. The icon lacked the original gradient shades of the Google logo.

2. It didn't perfectly match Google's branding.

### Final Solution ✅

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.

#### Implementation 🧐

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!

## Features 🎨

- Draws the Google "G" logo accurately.

- Uses `CustomPainter` for custom drawing.

- Provides flexibility to adjust size and colors.

- Does not rely on external icon libraries.

## How to Run 🏃‍♂️

1. Clone the repository:

   ```sh

   git clone https://github.com/Hifza-Khalid/google-logo-flutter.git

   ```

2. Open the project in your preferred Flutter development environment.

3. Run the app:

   ```sh

   flutter run

   ```

### Final Output Image 📸

![Final Google Logo Output](https://github.com/Hifza-Khalid/google-logo-flutter/blob/main/screenshots/Google2.JPG)



## Author ✨

- Developed & modified by **Hifza** 🌟🖌️

## Gist Google logo in Flutter 🎨

[![Google Logo gist](https://img.shields.io/badge/Gist-view-blue)](https://gist.github.com/Hifza-Khalid/a029b430a4f089db173734d4fbd30a51)

## License 📚

This project is open-source and available under the [MIT License](LICENSE).