google_ui 2.7.0 icon indicating copy to clipboard operation
google_ui: ^2.7.0 copied to clipboard

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 #

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
28
likes
90
pub points
71%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter, flutter_riverpod, intl, spring

More

Packages that depend on google_ui