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

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 ? — FDuhen, Mar 07 '22 at 14:01
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, Mar 07 '22 at 14:11
Tried to remove AppLocalizations usage even after it, the issue remains. — Felix, Mar 07 '22 at 14:55

Felix · Accepted Answer · 2022-04-12T12:35:05.387

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.

Kucing Malaya · Answer 2 · 2023-08-01T08:30:22.450

1

For me, have to wait for preferredOrientations and add await of 150 milliseconds before runApp(). because some phones will launch the app too fast which can cause the UI to not be ready yet. like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  await Future.delayed(const Duration(milliseconds: 150));
  runApp(const MyApp());
}

edited Aug 01 '23 at 08:30

answered Jun 22 '23 at 04:35

Kucing Malaya

277
3
12

This was specific problem with Flutter, which allowed using const with widgets using variable values. This problem is avoided by default because dart extension and linter will point to you you can't use const with variable. – Felix Jun 22 '23 at 15:17

Flutter not rendering UI in real device on release apk

2 Answers2

Linked