getxer

Description:

getxer

Getxer
The GetXer 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
getxer: ^1.0.0
copied to clipboard

Install it

Run the following command in your terminal or command prompt:
$ flutter pub get
copied to clipboard

Import it

Add the following import statement to your Dart code:
import 'package:getxer/getxer.dart';
copied to clipboard
Usage #

Import the package:

import 'package:getxer/getxer.dart';
copied to clipboard

Prepare GetxController :

class CustomController with GetxController {
final String userName = 'James';
}
copied to clipboard

Extend your screen with the BaseScreen class and provide a GetxController 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`
);
}
}
copied to clipboard
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
}
copied to clipboard

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();
}
}
copied to clipboard



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();
}
}
copied to clipboard



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();
}
}
copied to clipboard
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(),
);
}
}
copied to clipboard
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();
}
}
copied to clipboard



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'),
);
}
}
copied to clipboard

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,
),
);
}
}
copied to clipboard

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,
),
),
);
}
}
copied to clipboard



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.