Container is flickering or bouncing when notification value changed in ValueListenalbeBuilder

Viewed 16

I have calendar text come from javascript using flutter_js. I used this calendar text widget in header widget as follow in home screen. Every time, navigate to home screen, screen is flickering or bouncing. If I take out this calendar widget, screen rendering is smooth.

If I put container height as follow, it is working as expected but I can't put the height because of the different size of screen.

Container(
            height: 100,
            padding:
                const EdgeInsets.only(top: 10, left: 20, right: 20, bottom: 10),
            child: const MyanmarCalender(),
          ),

myanmar_calender.dart

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_js/flutter_js.dart';
import 'package:intl/intl.dart';

class MyanmarCalender extends StatefulWidget {
  const MyanmarCalender({Key? key}) : super(key: key);

  @override
  State<MyanmarCalender> createState() => _MyanmarCalenderState();
}

class _MyanmarCalenderState extends State<MyanmarCalender> {
  final dateString = ValueNotifier("");

  @override
  void initState() {
    super.initState();
    try {
      JavascriptRuntime jsRuntime = getJavascriptRuntime();
      getMyanmardate(jsRuntime, "my-en").then(
        (value) => {
          dateString.value = value.toString(),
        },
      );
    }  catch (e) {
      dateString.value = "";
      if (kDebugMode) {
        print('error: ${e.toString()}');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
        valueListenable: dateString,
        builder: (context, value, widget) {
          return AutoSizeText(
            value.toString().isEmpty ? '' :
                '${value.toString()} (${DateFormat('d MMMM y').format(DateTime.now())})',
                
            style: Theme.of(context).textTheme.caption,
            textAlign: TextAlign.center,
            maxLines: 3,
            //overflow: TextOverflow.ellipsis,
          );
        });
  }

  Future<String> getMyanmardate(
      JavascriptRuntime jsRuntime, String lang) async {
    String mcalrsJs = await rootBundle.loadString("assets/js/mcalrs.js");
    final jsResult = jsRuntime.evaluate("""${mcalrsJs}getCalender()""");
    final jsStringResult = jsResult.stringResult;
    return jsStringResult;
  }
}

header.dart

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:thitsarparami/helper/constants.dart';
import 'package:thitsarparami/ui/home/components/myanmar_calender.dart';

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

  @override
  Widget build(BuildContext context) {
    final double screeWidth = MediaQuery.of(context).size.width;
    final double screenHeight = MediaQuery.of(context).size.height;
    return Container(
      padding: const EdgeInsets.only(top: 30, left: 0, right: 0, bottom: 10),
      width: screeWidth,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Expanded(
                child: Container(
                  padding: const EdgeInsets.only(top: 20, left: 10, right: 0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      AutoSizeText(
                        kHomeTitle1,
                        style: Theme.of(context).textTheme.headline1,
                        maxLines: 1,
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      AutoSizeText(
                        kHomeTitle2,
                        style: Theme.of(context).textTheme.headline2,
                        maxLines: 1,
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      AutoSizeText(
                        kHomeTitle3,
                        style: Theme.of(context).textTheme.headline3,
                        maxLines: 1,
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                width: screeWidth * 0.40,
                height: screenHeight * 0.19,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("assets/images/buddha.png"),
                      fit: BoxFit.contain),
                ),
              ),
            ],
          ),
          Container(
            padding:
                const EdgeInsets.only(top: 10, left: 20, right: 20, bottom: 10),
            child: const MyanmarCalender(),
          ),
        ],
      ),
    );
  }
}

home_screen.dart

// ignore_for_file: prefer_const_constructors_in_immutables
import 'package:flutter/material.dart';
import 'package:thitsarparami/connectivity_wrapper/widgets/connectivity_screen_wrapper.dart';
import 'package:thitsarparami/ui/home/components/menu.dart';
import 'package:thitsarparami/widgets/base_widget.dart';
import 'components/header.dart';

class HomeScreen extends StatefulWidget {
  static const routeName = '/home';
  final BuildContext? menuScreenContext;
  final Function? onScreenHideButtonPressed;
  final bool hideStatus;
  const HomeScreen(
      {Key? key,
      this.menuScreenContext,
      this.onScreenHideButtonPressed,
      this.hideStatus = false})
      : super(key: key);

  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    // try {
    //   throw Exception("Crash test");
    // } catch (error, stack) {
    //   FirebaseCrashlytics.instance.recordError(error, stack, reason: "Test");
    // }
  }

  @override
  Widget build(BuildContext context) {
    return BaseWidget(
      child: Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: ConnectivityScreenWrapper(
          positionOnScreen: PositionOnScreen.BOTTOM,
          child: SingleChildScrollView(
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Theme.of(context).primaryColorDark,
                    Theme.of(context).primaryColorLight,
                  ],
                  begin: const FractionalOffset(0.0, 0.4),
                  end: Alignment.centerRight,
                ),
              ),
              child: Column(
                children:  const [
                  HeaderContainer(),
                  MenuContainer(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
0 Answers
Related