google_ui 2.7.0

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

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 Riverpod
  • Install Google UI
• Widgets
  • Button
    • GElevatedButton
    • GTextButton
    • GOutlinedButton
  • ListTile
    • GListTile
    • GDrawerListTile
    • GSwitch
    • GRadio
    • GCheckBox
  • GSelectBox
  • GAppBar
  • Field
  • GErrorMessage
  • Grid
  • GText

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 riverpod

Some Google UI widgets is managing the state using flutter_riverpod

• Follow instalation instruction here
• Replace main function in lib/main.dart with

void main() {
  runApp(const ProviderScope(child: App()));
}

Install Google UI

• Follow instalation instruction here

• Register the theme

return MaterialApp(
  title: "YOUR APP TITLE",
  theme: GThemeGenerator.generate(),
  darkTheme: GThemeGenerator.generateDark(),
  home: const HomePage(),
);

Widgets

Button

GElevatedButton

GElevatedButton(
  "Click me"
  onPressed: () {},
);

GElevatedButton(
  "Click me",
  icon: const Icon(Icons.star),
  onPressed: () {},
),

// Equivalent to

ElevatedButton(
  onPressed: () {},
  child: Text("Click me"),
),

ElevatedButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.star),
  label: Text("Click me"),
),

GTextButton

GTextButton(
  "Click me"
  onPressed: () {},
);

GTextButton(
  "Click me",
  icon: const Icon(Icons.star),
  onPressed: () {},
),

// Equivalent to

TextButton(
  onPressed: () {},
  child: Text("Click me"),
),

TextButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.star),
  label: Text("Click me"),
),

GOutlinedButton

GOutlinedButton(
  "Click me"
  onPressed: () {},
);

GOutlinedButton(
  "Click me",
  icon: const Icon(Icons.star),
  onPressed: () {},
),

// Equivalent to

OutlinedButton(
  onPressed: () {},
  child: Text("Click me"),
),

OutlinedButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.star),
  label: Text("Click me"),
),

ListTile

GListTile

GListTile(
  title: "Title",
  subtitle: "Subtitle",
),

// Equivalent to

ListTile(
  title: Text("Title"),
  subtitle: Text("Subtitle"),
),

GDrawerListTile

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

GSwitch

GSwitch(
  title: "Switch",
  subtitle: "Switch subtitle",
  value: value,
  onChanged: (value) {},
),

GRadio

GRadio<int>(
  title: "Radio 1",
  value: 1,
  groupValue: value,
  onChanged: (value) {},
),

GCheckBox

GCheckBox(
  title: "Check box",
  subtitle: "Check box subtitle",
  value: value,
  onChanged: (value) {},
),

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) {},
),

GAppBar

GAppBar(title: "App bar"),

// App bar with search bar
GSearchAppBar(
  title: "Search app bar",
  hintText: "Search something...",
),

Field

GTextFormField(labelText: "Username"),

// Password field
GTextFormField(
  labelText: "Password",
  passwordField: true,
),

// Date field
GDateTextFormField(labelText: "Date"),

GErrorMessage

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

Grid

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

// Scrollable grid
GGridBuilder(
  gap: 16,
  padding: EdgeInsets.all(16),
  columnCount: 3,
  itemCount: 10,
  itemBuilder: (context,index) =>  child,
),

GText

GText(
  "headline1",
  variant: GTextVariant.headline1,
),

// variant
// - headline1
// - headline2
// - headline3
// - headline4
// - headline5
// - headline6
// - subtitle1
// - subtitle2
// - bodyText1
// - bodyText2
// - button
// - caption
// - overline