Getx Screen
The Getx Screen package is a superset of the GetView class provided by the Getx package. It aims to simplify the creation of screens in Flutter applications using the GetX state management solution. With this package, you can easily build screens with various features such as an app bar, safe area handling, floating action button, bottom navigation bar, and more.
Key Features
- 🔑 Simplified screen creation with the BaseScreen class
- 🚀 Boost your productivity
- 📚 Enhance code readability
- 🛠Easy customization for improved maintainability
Installing
To use the Easy Isolate Mixin package in your Flutter project, follow these steps:
- Depend on it
This package is based on GetX state
management solution. To use it, you need to add both get
and getx_screen
to
your pubspec.yaml
file:
dependencies:
get: ^4.6.5
getx_screen: ^1.0.0
- Install it
Run the following command in your terminal or command prompt:
$ flutter pub get
- Import it
Add the following import statement to your Dart code:
import 'package:getx_screen/getx_screen.dart';
Usage
- Import the package:
import 'package:getx_screen/getx_screen.dart';
- Prepare GetxController :
class CustomController with GetxController {
final String userName = 'James';
}
- Extend your screen with the
BaseScreen
class and provide aGetxController
as the type
class CustomScreen extends BaseScreen<CustomController> {
const CustomScreen({Key? key}) : super(key: key);
@override
Widget buildScreen(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Text(vm.userName), // just call `vm.something`
);
}
}
You can access the controller's properties and methods by using vm
as a reference.
- Customize your screen by overriding the optional methods and properties provided by the BaseScreen class
class CustomScreen extends BaseScreen<CustomController> {
const CustomScreen({Key? key}) : super(key: key);
@override
PreferredSizeWidget? buildAppBar(BuildContext context) {
// Custom app bar implementation
return AppBar(
title: const Text('Custom Screen'),
);
}
@override
Widget buildScreen(BuildContext context) {
// Custom screen layout
return Container(
padding: EdgeInsets.all(20),
child: Text('Hello, GetX!'),
);
}
@override
bool get setBottomSafeArea => false;
@override
Color? get screenBackgroundColor => Colors.white;
@override
Widget? get buildFloatingActionButton =>
FloatingActionButton(
onPressed: () {
// Handle floating action button press
},
child: const Icon(Icons.add),
);
// Override other optional methods and properties as needed
}
AppBar
You can add an app bar to your screen by overriding the buildAppBar method.
class CounterScreen extends BaseScreen<CounterViewModel> {
const CounterScreen({Key? key}) : super(key: key);
@override
PreferredSizeWidget? buildAppBar(BuildContext context) {
return AppBar(
title: const Text('Counter App'),
);
}
@override
Widget buildScreen(BuildContext context) {
return const Placeholder();
}
}
Parameter | Default | Description |
---|---|---|
buildAppBar | null | customizes the app bar widget |
SafeArea
To control the safe area behavior of your screen, you can override the following properties.
class CounterScreen extends BaseScreen<CounterViewModel> {
const CounterScreen({Key? key}) : super(key: key);
@override
bool get setBottomSafeArea => false;
@override
PreferredSizeWidget? buildAppBar(BuildContext context) {
return AppBar(
title: const Text('Counter App'),
);
}
@override
Widget buildScreen(BuildContext context) {
return const Placeholder();
}
}
Parameter | Type | Default | Description |
---|---|---|---|
wrapWithSafeArea | bool | true | wrap screen content with SafeArea |
setTopSafeArea | bool | true | consider top safe area. |
setBottomSafeArea | bool | true | consider bottom safe area. |
Color
You can customize the screen's background color and unsafe area color by overriding the following properties
class CounterScreen extends BaseScreen<CounterViewModel> {
const CounterScreen({Key? key}) : super(key: key);
@override
bool get setBottomSafeArea => false;
@override
Color? get screenBackgroundColor => Colors.green;
@override
Color? get unSafeAreaColor => Colors.amber;
@override
PreferredSizeWidget? buildAppBar(BuildContext context) {
return AppBar(
title: const Text('Counter App'),
);
}
@override
Widget buildScreen(BuildContext context) {
return const Placeholder();
}
}
To set a default color for screenBackgroundColor
and unSafeAreaColor
across your app, you can customize the theme in
your MaterialApp widget:
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
// customize it
scaffoldBackgroundColor: Colors.white,
unselectedWidgetColor: Colors.blue,
),
title: 'Getx Screen',
initialBinding: CounterBinding(),
home: const CounterScreen(),
);
}
}
By modifying the theme's scaffoldBackgroundColor
and unselectedWidgetColor
, you can set the default colors for
screenBackgroundColor and unSafeAreaColor respectively.
Parameter | Type | Default | Description |
---|---|---|---|
screenBackgroundColor | Color? | Theme.of(context).scaffoldBackgroundColor | sets the background color of the screen |
unSafeAreaColor | Color? | Theme.of(context).unselectedWidgetColor | sets the color of the unsafe area. |
Floating Action Button
Create the Floating Action Button widget in your screen.
class CounterScreen extends BaseScreen<CounterViewModel> {
const CounterScreen({Key? key}) : super(key: key);
@override
bool get setBottomSafeArea => false;
@override
Color? get screenBackgroundColor => Colors.green;
@override
Color? get unSafeAreaColor => Colors.amber;
@override
Widget? get buildFloatingActionButton =>
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
);
@override
FloatingActionButtonLocation? get floatingActionButtonLocation => FloatingActionButtonLocation.startFloat;
@override
PreferredSizeWidget? buildAppBar(BuildContext context) {
return AppBar(
title: const Text('Counter App'),
);
}
@override
Widget buildScreen(BuildContext context) {
return const Placeholder();
}
}
Parameter | Type | Default | Description |
---|---|---|---|
buildFloatingActionButton | Widget? | null | customizes the floating action button widget |
floatingActionButtonLocation | Widget? | null | sets the position of the floating action button. |
Connect ViewModel Resources to View(BaseScreen)
You can access the properties and methods of the controller by using vm
as a reference. In this case, vm
stands
for "view model," which is an abbreviation commonly used to refer to the associated view model `GetxController.
class CounterViewModel extends GetxController {
RxInt count = 0.obs;
void increaseCount() {
count(count.value + 1);
}
}
class CounterScreen extends BaseScreen<CounterViewModel> {
const CounterScreen({Key? key}) : super(key: key);
@override
Widget buildScreen(BuildContext context) {
return Center(
child: Obx(
() =>
Text(
'${vm.count.value}',
style: Theme
.of(context)
.textTheme
.headlineLarge,
),
),
);
}
@override
bool get setBottomSafeArea => false;
@override
Color? get screenBackgroundColor => Colors.green;
@override
Color? get unSafeAreaColor => Colors.amber;
@override
Widget? get buildFloatingActionButton =>
FloatingActionButton(
onPressed: vm.increaseCount,
child: const Icon(Icons.add),
);
@override
FloatingActionButtonLocation? get floatingActionButtonLocation =>
FloatingActionButtonLocation.startFloat;
@override
PreferredSizeWidget? buildAppBar(BuildContext context) {
return AppBar(
title: const Text('Counter App'),
);
}
}
Nested View (BaseView)
If you want to build a simple widget without creating a complete app screen based on Scaffold
and separate the
controller and screen layout, you can use BaseView
class CounterScreen extends BaseScreen<CounterViewModel> {
const CounterScreen({Key? key}) : super(key: key);
@override
Widget buildScreen(BuildContext context) {
return const Center(
child: CounterIndicator(),
);
}
// Skipping previous code...
}
// Seperated class witch extends BaseView.
class CounterIndicator extends BaseView<CounterViewModel> {
const CounterIndicator({Key? key}) : super(key: key);
@override
Widget buildView(BuildContext context) {
return Obx(
() =>
Text(
'${vm.count.value}',
style: Theme
.of(context)
.textTheme
.headlineLarge,
),
);
}
}
Bottom Navigation Bar
Customize the bottom navigation bar widget in your screen.
class CounterScreen extends BaseScreen<CounterViewModel> {
const CounterScreen({Key? key}) : super(key: key);
// Skipping previous code...
@override
Widget? buildBottomNavigationBar(BuildContext context) {
return BottomNavigationBar(items: const [
BottomNavigationBarItem(
label: 'home',
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: 'user',
icon: Icon(Icons.account_circle),
)
]);
}
@override
Widget buildScreen(BuildContext context) {
return Center(
child: Obx(
() =>
Text(
'${vm.count.value}',
style: Theme
.of(context)
.textTheme
.headlineLarge,
),
),
);
}
}
Parameter | Type | Default | Description |
---|---|---|---|
buildBottomNavigationBar | Widget? | null | customizes the bottom navigation bar widget. |
Other Options
Additionally, there are other available options that can be overridden in your screen class
Parameter | Type | Default | Description |
---|---|---|---|
onWillPopCallback | bool Function()? | null | handles the back button press or pop action |
resizeToAvoidBottomInset | bool | true | enables or disables screen resizing to avoid the bottom |
extendBodyBehindAppBar | bool | false | extends the body behind the app bar. |