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(),
],
),
),
),
),
),
);
}
}