CODEWITHSUNDEEP
flutteruser-interfacerenderrelease-apk
Felix
Felix

Reputation: 96

Flutter not rendering UI in real device on release apk

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

Upvotes: 2

Views: 2606

Answers (3)

prem
prem

Reputation: 107

Anyone facing this issue and you are using flutter screen util package, this might help.

Before initilising the package. Make sure to add this line in you main method.

  void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await ScreenUtil.ensureScreenSize(); //add this line
      runApp(AppWatcher());
   }

Upvotes: 1

Kucing Malaya
Kucing Malaya

Reputation: 465

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

Upvotes: 2

Felix
Felix

Reputation: 96

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.

Upvotes: 2

Related Questions