nes_ui

Description:

nes ui

Nes #




UI library inspired by old retro video game console
Installation 💻 #
❗ In order to start using Nes UI you must have the Flutter SDK installed on your machine.
Add nes_ui to your pubspec.yaml:
dependencies:
nes_ui:
copied to clipboard
Install it:
flutter packages get
copied to clipboard

Configure it #
Nes UI provides a ThemeData that you can add to your MaterialApp, that theme can be obtained
from the flutterNesTheme method:
import 'package:nes_ui/nes_ui.dart';

MaterialApp(
theme: flutterNesTheme(),
);
copied to clipboard
Check the many arguments on the method to customize the theme.
Font #
Nes UI uses the Press start 2P
from the Google Fonts package.
Google fonts will fetch the files in runtime over http. To keep that behaviour and ensure that it works,
be sure to call WidgetsFlutterBinding.ensureInitialized(); at your main method.
For more info on that follow this Google Fonts package guide.
If instead you want to bundle the fonts in the app and avoid http requests,
follow this other guide.
You also should include the font license on LicenseRegistry when bundling it on the app.
For example:
void main() {
LicenseRegistry.addLicense(() async* {
final license = await rootBundle.loadString('google_fonts/OFL.txt');
yield LicenseEntryWithLineBreaks(['google_fonts'], license);
});

runApp(...);
}
copied to clipboard
More about font license here.
Widget gallery #
Check the gallery of all widgets here.
Getting help #
If you need any help or have suggestions, join our Discord.
Material Customized Widgets #
Nes UI tries to use the most out of material that it can, customizing its looks to fit
the package's desired look, here is the list of widgets from Material that is customized by
Nes UI

Text
TextField/TextFormField
Divider

Custom Widgets #
Some widgets are too different from the Material look and structure, which was not possible to
achieve without building the whole widget from scratch, this is the list of widgets that Nes UI
provides:

NesButton
NesCheckbox
NesContainer
NesConfirmDialog
NesIcon
NesSelectionList
NesIterableOptions

More to come!
Custom Extension #
Nes UI is built taking advantage of the Theme Extensions and custom extensions can also be provided.
In order to provide your own extension, you need to create it, and provide it to the flutterNesTheme:
theme: flutterNesTheme(
brightness: state.lightMode ? Brightness.light : Brightness.dark,
customExtensions: [
CustomExampleExtension.light, // Your custom extension goes here.
],
),

copied to clipboard
For more information, look at the example code.