Google UI is an open-source UI library for developing cross-platform apps using Flutter with "Material Design 2.0"
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
Some Google UI widgets is managing the state using flutter_riverpod
- Follow instalation instruction here
- Replace
main
function inlib/main.dart
with
void main() {
runApp(const ProviderScope(child: App()));
}
-
Follow instalation instruction here
-
Register the theme
return MaterialApp(
title: "YOUR APP TITLE",
theme: GThemeGenerator.generate(),
darkTheme: GThemeGenerator.generateDark(),
home: const HomePage(),
);
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(
"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(
"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"),
),
GListTile(
title: "Title",
subtitle: "Subtitle",
),
// Equivalent to
ListTile(
title: Text("Title"),
subtitle: Text("Subtitle"),
),
GDrawerListTile(
leading: const Icon(Icons.inbox_outlined),
title: "Inbox",
trailing: const Text("1"),
selected: true,
onTap: () {},
),
GSwitch(
title: "Switch",
subtitle: "Switch subtitle",
value: value,
onChanged: (value) {},
),
GRadio<int>(
title: "Radio 1",
value: 1,
groupValue: value,
onChanged: (value) {},
),
GCheckBox(
title: "Check box",
subtitle: "Check box subtitle",
value: value,
onChanged: (value) {},
),
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(title: "App bar"),
// App bar with search bar
GSearchAppBar(
title: "Search app bar",
hintText: "Search something...",
),
GTextFormField(labelText: "Username"),
// Password field
GTextFormField(
labelText: "Password",
passwordField: true,
),
// Date field
GDateTextFormField(labelText: "Date"),
GErrorMessage(
icon: const Icon(Icons.wifi_off_outlined),
title: "No internet",
subtitle:
"Can't connect to the internet.\nPlease check your internet connection",
onPressed: () {},
),
// 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(
"headline1",
variant: GTextVariant.headline1,
),
// variant
// - headline1
// - headline2
// - headline3
// - headline4
// - headline5
// - headline6
// - subtitle1
// - subtitle2
// - bodyText1
// - bodyText2
// - button
// - caption
// - overline