如何使用getx controller，绑定，getview？

Question

I trying to create small project with getx, I have 3 file's get view,getxcontroller,binding and then when I'm running I get issue like this:

Unhandled Exception: "IncrementController" not found. You need to call "Get.put(IncrementController())" or "Get.lazyPut(()=>IncrementController())"

so did i wrong about getx flow step? let's checkit my code below:

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/controller.dart';
import 'package:get/get.dart';

void main() {
  runApp(GetMaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends GetView<IncrementController> {
  final IncrementController _controller = Get.find<IncrementController>();
  @override
  Widget build(BuildContext context) {
    //display increment with getx
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${_controller.increment}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _controller.incrementFun,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

controller

import 'package:get/get_rx/get_rx.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_getx_widget.dart';
import 'package:get/get_state_manager/src/simple/get_controllers.dart';

class IncrementController extends GetxController {
  //create increment with getx
  RxInt _increment = 0.obs;
  //get increment
  int get increment => _increment.value;

  //create increment functiion with getx
  void incrementFun() => _increment.value++;
}

binding

import 'package:flutter_application_1/controller.dart';
import 'package:get/get.dart';

class IncrementBinding implements Bindings {
  @override
  void dependencies() {
    // TODO: implement dependencies
    //create controller with getx
    Get.lazyPut<IncrementController>(() => IncrementController());
  }
}

Answer 1

You need to set the initial binding inside the MaterialApp or GetMaterialApp like this:

    GetMaterialApp(
      initialBinding: IncrementBinding(),
      home: HomeOage(),
    );

Answer 2

you need to call IncrementBinding() method in your route befor going to HomePage. just like this: Get.to(HomePage(),binding:IncrementBinding() ); Or this: GetMaterialApp( initialBinding: IncrementBinding(), home: HomePage(), ); or if you use this way you can call just like this: GetPage( name: Routes.homePage enter code, page: () => HomePage(), binding: IncrementBinding(), ), `

Answer 3

You have to add initialBinding parameter in the GetMaterialApp() widget, and in the UI class where you use GetView , You have to wrap the column or the whole scaffold with a Obx() or GetX() widget, because in the controller class you have used Rx and .obs .

You can see this example, these some classes from one of my projects:

main function:

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialBinding: Binding(),
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

Binding class:

class Binding extends Bindings {
  @override
  void dependencies() {
    Get.put(() => AuthController());
    Get.lazyPut(() => HomePageController());
  }
}

Controller class:

class Database extends GetxController {
  static Database instance = Database();

  final CollectionReference userCollectionRef =
      FirebaseFirestore.instance.collection('Users');

  List<SubscriberModel> subscriberModel = <SubscriberModel>[].obs;

  List<UserModel> userModel = <UserModel>[].obs;
}

The UI class:

class SubscriberInfo extends StatelessWidget {
  const SubscriberInfo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      SubscriberController controller = Get.put(SubscriberController());
      return Scaffold(
        backgroundColor: AppColors.whiteColor,
        body: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          scrollDirection: Axis.vertical,
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.only(top: Dimensions.height50),
                child: AddTextField(
                  controller: controller.searchController,
                  type: TextInputType.text,
                  label: 'Search subscriber'.tr,
                  maxLength: 25,
                  autoFocus: false,
                  secureText: false,
                  onTap: () {},
                  onEditComplete: () {
                    FocusScope.of(context).unfocus();
                  },
                  onChange: controller.onSearching,
                ),
              ),
              ListView.builder(
                physics: const BouncingScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: controller.filteredSubscribers.length,
                itemBuilder: (context, index) {
                  final item = controller.filteredSubscribers[index];
                  return buildSubInfo(
                    context: context,
                    name: item.firstName,
                    lastName: item.lastName,
                    father: item.father,
                    subType: item.subscriptionType,
                    counterNo: item.counterNumber,
                    date: item.date,
                    edit: () {
                      controller.editSubscriberWidget(
                        id: item.id,
                      );
                    },
                    delete: () {
                      controller.deleteSubscriberWidget(
                        id: item.id,
                      );
                    },
                    onClick: () {},
                  );
                },
              ),
            ],
          ),
        ),
      );
    });
  }
}