getxer 1.0.0

Boost productivity and enhance code readability with a simplified screen creation package based on Flutter's GetX state management

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:

1. 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

2. Install it

Run the following command in your terminal or command prompt:

$ flutter pub get

3. Import it

Add the following import statement to your Dart code:

import 'package:getxer/getxer.dart';

Usage

1. Import the package:

import 'package:getxer/getxer.dart';

2. Prepare GetxController :

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

3. 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`
    );
  }
}

You can access the controller's properties and methods by using vm as a reference.

4. 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.