google_ui 0.0.1 google_ui: ^0.0.1 copied to clipboard
A collection of widgets that look similar to widgets in the Google Ads app.
Google UI #
A collection of widgets that look similar to widgets in the Google Ads app.
I created this project to speed up my application development process by creating some reusable widgets. every widget in this project is made to look similar to the widgets in the Google Ads application.
Screenshots #
Light mode | Dark Mode |
---|---|
Getting Started #
Apply google_ui theme to your app
import 'package:flutter/material.dart';
import 'package:google_ui/google_ui.dart';
import 'pages/index.dart';
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
const theme = GoogleTheme();
return MaterialApp(
title: "Google UI",
theme: theme.apply(),
darkTheme: theme.apply(darkMode: true),
home: const HomePage(),
);
}
}
Using Widget #
GoogleButton #
// Elevated Button
GoogleButton(
"Elevated".toUpperCase(),
onPressed: () {},
),
//Elevated Icon Button
GoogleButton(
"Elevated".toUpperCase(),
onPressed: () {},
icon: const Icon(Icons.add),
),
// Text Button
GoogleButton(
"Text".toUpperCase(),
onPressed: () {},
variant: GoogleButtonVariant.text,
),
...
// Available Variant
GoogleButtonVariant.elevated
GoogleButtonVariant.text
GoogleButtonVariant.outlined
GoogleSwitch #
GoogleSwitch(
label: "Dark mode",
value: themeProviderConsumer.state,
onChanged: (value) {
themeProviderConsumer.state = value;
},
)
GoogleGrid #
GoogleGrid(
padding: const EdgeInsets.all(16),
gap: 10,
children: [],
)
Typography #
GoogleText(
"headline1",
variant: GoogleTextVariant.headline1,
),
....
// Available Variant
GoogleTextVariant.headline1
GoogleTextVariant.headline2
GoogleTextVariant.headline3
GoogleTextVariant.headline4
GoogleTextVariant.headline5
GoogleTextVariant.headline6
GoogleTextVariant.subtitle1
GoogleTextVariant.subtitle2
GoogleTextVariant.bodyText1
GoogleTextVariant.bodyText2
GoogleTextVariant.button
GoogleTextVariant.caption
GoogleTextVariant.overline