How to Change Screen Using Flutter Getx

Question

I Got Questions here. How to change screen using FLutter Getx. I got GetxControll that searchUser from firestore. Here's the code.

class AuthenticationC extends GetxController {
final usersRef = FirebaseFirestore.instance.collection('Users');
List<QueryDocumentSnapshot> searchResultFuture;
  searchUser(String query) async {
    QuerySnapshot snapshot = await usersRef
        .where('DisplayName', isGreaterThanOrEqualTo: query)
        .get();

    searchResultFuture = snapshot.docs;   
    return snapshot.docs;
  }
}

then I want to change UI from buildNoContent() to With buildSearchedContent(). when the user enters text in the TextField. then it will auto-change the UI. I already got the searchUser but the UI Doesn't change. here the UI Code. Thank You

class SearchUserScreen extends StatelessWidget {
final authenticationC = AuthenticationC.to;
@override
Widget build(BuildContext context) {
    return Scaffold(
       body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            searchBox(),
            SizedBox(
              height: 20,
            ),
            authenticationC.searchResultFuture == null   // i want to change here 
                ? buildNoContent()                       // im already using GetBuilder<AuthenticationC> 
                : Expanded(child: buildSearchedContent(),// But it wont change
                  ),
          ],
        ),
      ),
  }
}

score 1 · Answer 1 · answered Nov 26 '20 at 00:51

Below I've posted an example of how to use Get to reactively update your UI.

The key points are:

your Controller class should have an observable variable/field/property. This is an Rx<Type> type of variable. It is actually a stream. When you change its value, Get will rebuild any widgets that are observing its value.
in your UI / Widget class, have either a GetX, Obx, GetBuilder widget (there are others as well) that wraps your observable variable. This is the widget that watches for changes to an observable & rebuilds itself when such an event arrives.

To run the example below...

In your pubspec.yaml file, add a dependency for english_words:

english_words: 3.1.5

Example:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.

  cupertino_icons: 0.1.2
  english_words: 3.1.5

Then you can copy paste this to a file and run it in an emulator.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class AuthenticationC extends GetxController {
  static AuthenticationC get to => Get.find();
  RxList<String> searchResultFuture = <String>[].obs;

  @override
  onInit() {
    searchUser('blah');
  }

  searchUser(String query) async {
    await Future.delayed(Duration(seconds: 1)); // fake delay
    List<WordPair> wordpairs = generateWordPairs().take(3).toList();

    searchResultFuture.assignAll(wordpairs.map((wp) => wp.asPascalCase).toList());
    return searchResultFuture;
  }
}

class SearchUserScreen extends StatelessWidget {
  //final AuthenticationC ac = Get.put(AuthenticationC());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: QueryFAB(),
      body: GetX<AuthenticationC>(
        init: AuthenticationC(),
        builder: (ac) => ListView.builder(
          itemCount: ac.searchResultFuture.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(ac.searchResultFuture[index]),
            );
          },
        ),
      )
    );
  }
}

class QueryFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () => AuthenticationC.to.searchUser('not used'),
    );
  }
}

score 0 · Answer 2 · answered May 08 '21 at 06:35

Try to put Obx in your UI:

class SearchUserScreen extends StatelessWidget {
final authenticationC = AuthenticationC.to;
@override
Widget build(BuildContext context) {
return Scaffold(
   body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Obx(()=>Column(
      children: [
        searchBox(),
        SizedBox(
          height: 20,
        ),
        authenticationC.searchResultFuture == null   // i want to change here 
            ? buildNoContent()                       // im already using GetBuilder<AuthenticationC> 
            : Expanded(child: buildSearchedContent(),// But it wont change
              ),
      ],
    ),),
  ),
  }
}

How to Change Screen Using Flutter Getx

2 Answers2

Linked