Flutter not rendering UI in real device on release apk

Question

I have been writting ui for my app, it was ok while building in debug mode. But when I built release apk, UI getting smudged, and Text isn't shown. Widgets are being rendered not as expected and their size being rendered not correctly. I checked it in different phones but result is the same. Is there a problem in my code or it's flutter's inner bug? Has anyone seen this before?

It's in release apk

It's in debug apk

import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:rx_shared_preferences/rx_shared_preferences.dart';

@override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        const SizedBox(height: 12.0),
        StreamBuilder(
          stream: rxPrefs.getStringStream('firstName'),
          builder: (context, snapshot) => Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
            child: Text(
              '${AppLocalizations.of(context)!.hello} ${snapshot.data ?? ''}',
              style: AppTextStyles.headline,
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 12.h),
          child: GestureDetector(
            onTap: () => context.push(SearchPage.route),
            child: Card(
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Row(
                  children: [
                    const Icon(Icons.search),
                    const SizedBox(width: 12.0),
                    Text(
                      AppLocalizations.of(context)!.search,
                      style: AppTextStyles.title0,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
        FutureBuilder(
            future: ApiService.getInstance().getPromos(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                List<Promo> promos = snapshot.data as List<Promo>;

                return Padding(
                  padding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 12.h),
                  child: CarouselSlider.builder(
                    options: CarouselOptions(
                      enlargeCenterPage: true,
                      enableInfiniteScroll: true,
                      height: widget.mediaQuery.size.height * .25,
                      viewportFraction: 1,
                    ),
                    itemCount: promos.length,
                    itemBuilder: (BuildContext context, int index, int realIndex) => Container(
                      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0)),
                      clipBehavior: Clip.hardEdge,
                      height: widget.mediaQuery.size.height * .25,
                      width: widget.mediaQuery.size.width,
                      child: CachedNetworkImage(
                        imageUrl: promos[index].image,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                  ),
                );
              }
              return Container(
                padding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 12.h),
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0)),
                clipBehavior: Clip.hardEdge,
                height: widget.mediaQuery.size.height * .25,
                width: widget.mediaQuery.size.width,
                // alignment: Alignment.center,
                child: const Card(child: Center(child: CircularProgressIndicator())),
              );
            }),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 12.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                AppLocalizations.of(context)!.categories,
                style: AppTextStyles.title0,
              ),
              GestureDetector(
                onTap: () => context.push(CategoriesPage.route),
                child: Text(
                  AppLocalizations.of(context)!.seeAll,
                  style: AppTextStyles.title0.copyWith(color: AppColors.grey),
                ),
              ),
            ],
          ),
        ),
        Consumer<CategoryBloc>(
          builder: (context, bloc, child) => SizedBox(
            height: widget.mediaQuery.size.height * .2,
            child: ListView.builder(
              padding: EdgeInsets.only(left: 18.w),
              itemCount: bloc.categories.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) => CategoryCard(category: bloc.categories[index]),
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 12.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                AppLocalizations.of(context)!.popular,
                style: AppTextStyles.title0,
              ),
              GestureDetector(
                onTap: () => context.push(ProductsPage.route),
                child: Text(
                  AppLocalizations.of(context)!.seeAll,
                  style: AppTextStyles.title0.copyWith(color: AppColors.grey),
                ),
              ),
            ],
          ),
        ),
        Consumer<ProductBloc>(
            builder: (context, bloc, child) =>
                Column(children: bloc.products.take(4).map((e) => ProductWidget(product: e)).toList())),
        const SizedBox(height: 16.0),
      ],
    );
  }```

Solution

I found the solution, the widgets weren't rendering because of const constructors of class-based widgets. To resolve this issue there're two ways, first to remove const before widget constructor and usage, second to remove screen_util or another package that generates value dynamically. Here's the link where I found the original solution https://github.com/OpenFlutter/flutter_screenutil/issues/341, https://github.com/OpenFlutter/flutter_screenutil/issues/350.

Comments

[FDuhen]

This isn't a Framework's bug. Your issue is probably related to your AppLocalizations setup. Did you try to run your app with the flutter run --release command and to check if you had any logs ?

[Felix]

Yes, I tried and there isn't anything strange. In logs, I have two lines "D/FlutterGeolocator( 5373): Creating service. D/FlutterGeolocator( 5373): Binding to location service." that's all.

[Felix]

Tried to remove AppLocalizations usage even after it, the issue remains.