UI freeze when make a large query in Floor flutter

124 Views Asked by At

My table have over 8000 records, when i search with common keyword, UI was freezed and can not do anything in screen. Do you have any suggestions for this issue.

Dao:

@Query(
      'SELECT * FROM ${DataConstants.tableSchool} WHERE instr(name, :keyword) > 0 OR instr(kana, :keyword) > 0 OR instr(cd, :keyword) > 0')
  Future<List<SchoolEntity>> getListSchoolsByKeyword(String keyword);

View:

@override
  void initState() {
    debounce(controller.keyword, (keyword) async {
      controller.listSchool.value =
          await controller.getKokoByKeywordUseCase(keyword as String);
    }, time: Duration(milliseconds: 500));
    searchFocusNode.addListener(onFocusChange);
    _animationController = AnimationController(
      duration: Duration(milliseconds: 150),
      vsync: this,
    );
    final Animation<double> curve =
        CurvedAnimation(parent: _animationController, curve: Curves.easeIn);
    _animation = IntTween(begin: 100, end: 0).animate(curve);
    _animation.addListener(
        () => controller.animationSearchBox.value = _animation.value);
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonAppBar(
        title: "検索",
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildSearchBox(),
            Gaps.vLine,
            Obx(
              () => _buildBorderList(),
            )
          ],
        ),
      ),
    );
  }

Widget _buildBorderList() {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: DimensRes.sp22,
        horizontal: DimensRes.sp16,
      ),
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: DimensRes.sp16,
        ),
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(DimensRes.sp10)),
          border: Border.all(color: ColorsRes.borderList),
        ),
        child: SizedBox(
          height: 500,
          child: ListView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              itemBuilder: (ctx, idx) {
                return _buildSchoolCard(controller.listSchool[idx]);
              },
              // separatorBuilder: (ctx, idx) {
              //   return Gaps.vLine;
              // },
              itemCount: controller.listSchool.length),
        ),
      ),
    );
  }

In this video, the pointer was freezed after i made query with new keyword. video

This is my mistake, i don't set height to the listview, so it render a lot of records to this screen. Just add fixed height will fixed it.

0

There are 0 best solutions below