Google UI

Google UI is an open-source UI library for developing cross-platform apps using Flutter with "Material Design 2.0"

Table of contents

• Installation
  • Setup font
  • Install Google UI
• Widgets
  • Button
  • ListTile
    • ListTile
    • GDrawerListTile
    • SwitchListTile
    • RadioListTile
    • CheckBoxListTile
  • GSelectBox
  • AppBar
  • Form field
  • GErrorMessage
  • Grid
  • Text

Installation

Setup font

Google UI uses poppins font family as an alternative to product sans

• Download the font
• Import font to pubspec.yaml

fonts:
  - family: Poppins
    fonts:
      - asset: fonts/Poppins/Poppins-Light.ttf
      - asset: fonts/Poppins/Poppins-LightItalic.ttf
        weight: 300
      - asset: fonts/Poppins/Poppins-Regular.ttf
      - asset: fonts/Poppins/Poppins-Italic.ttf
        weight: 400
      - asset: fonts/Poppins/Poppins-Medium.ttf
      - asset: fonts/Poppins/Poppins-MediumItalic.ttf
        weight: 500

Install Google UI

• Follow instalation instruction here

• Initialize Google UI

return GoogleUI(
  builder: (context, theme, darkTheme) {
    return MaterialApp(
      title: "YOUR APP NAME",
      theme: theme,
      darkTheme: darkTheme,
      home: const HomePage(),
    );
  },
),

Widgets

Button

ListTile

ListTile

GDrawerListTile

GDrawerListTile(
  leading: const Icon(Icons.inbox_outlined),
  title: "Inbox",
  trailing: const Text("1"),
  selected: true,
  onTap: () {},
),

SwitchListTile

RadioListTile

CheckBoxListTile

GSelectBox

GSelectBox<int>(
  value: value,
  items: [
    GSelectBoxItem(
      title: "Select 1",
      value: 1,
    ),
    GSelectBoxItem(
      title: "Select 2",
      value: 2,
    ),
    GSelectBoxItem(
      title: "Select 3",
      value: 3,
    ),
  ],
  onChanged: (value) {},
),

AppBar

Field

GErrorMessage

GErrorMessage(
  icon: const Icon(Icons.wifi_off_outlined),
  title: "No internet",
  subtitle:
      "Can't connect to the internet.\nPlease check your internet connection",
  buttonLabel: "Try again"
  onPressed: () {},
),

Grid

GGrid(
  gap: 16,
  padding: EdgeInsets.all(16),
  columnCount: 3,
  children: [],
)

Text