Каким будет правильный подход к управлению состоянием GetX Flutter?

Я хочу изменить фоновое изображение главного экрана, когда пользователь выбирает изображение из GridView. GridView находится в ящике. Я новичок в разработке программного обеспечения, но каким-то образом мне удалось заставить его работать, но новичком. Хотите знать, каков ваш подход? Использование пакета GetX для управления состоянием.

Коды следующие:

HomeScreen Code:

  class HomeScreen extends StatelessWidget {
  final MyController controller = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GetBuilder<MyController>(
          builder: (controller) => Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: controller.bgImage.image,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),

GridView Code:

class MyGridView extends StatelessWidget {
  final MyController controller = Get.put(MyController());
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.yellow,
          title: Text(
            'Select a background',
            style: TextStyle(color: Colors.black),
          ),
          centerTitle: true,
        ),
        body: Container(
          child: GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.all(10.0),
            children: [
              Container(
                child: GestureDetector(
                  onTap: () => controller.setBGImage1(),
                  child: Image(
                    image: controller.bgImageList[0].image,
                  ),
                ),
              ),
              Container(
                child: GestureDetector(
                  onTap: () => controller.setBGImage2(),
                  child: Image(
                    image: controller.bgImageList[1].image,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Controller Code:

    class MyController extends GetxController {
  Image bgImage = Image.asset('assets/jellypop.jpg');

  List<Image> bgImageList = [
    Image.asset('assets/jellypop.jpg'),
    Image.asset('assets/xyz.jpg'),
  ];

  setBGImage1() {
    bgImage = bgImageList[0];
    update();
  }

  setBGImage2() {
    bgImage = bgImageList[1];
    update();
  }
}

0 ответов

Другие вопросы по тегам