Widgets show in debug apk but are grey blocks in the release apk

Question

Whenever I am debugging my app the chart and the information is shown but then whenever I try and use the release apk, it shows up as these grey boxes instead.

Please if you have any ideas on why this is happening or how to fix it or anything I would appreciate it SO much. (Also if I am missing anything please tell me, I'll add it)

This is what they are meant to look like:

but they look like this on the release:

This is the page

// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, sized_box_for_whitespace, must_be_immutable, unnecessary_brace_in_string_interps, avoid_print, unused_local_variable

import 'package:flutter/material.dart';
import 'package:the_holy_trinity/models/food_model.dart';
import 'package:the_holy_trinity/modules/styles/text_styles.dart';
import 'package:the_holy_trinity/modules/widgets/amount_selection.dart';
import 'package:the_holy_trinity/modules/widgets/nutrients_display.dart';
import 'package:the_holy_trinity/services/getters/per_hundred.dart';

String? dropDownValue;

class FoodDetailsPage extends StatefulWidget {
  Food food;
  Serving? serving;
  FoodDetailsPage({super.key, required this.food, required this.serving});

  @override
  State<FoodDetailsPage> createState() => _FoodDetailsPageState();
}

class _FoodDetailsPageState extends State<FoodDetailsPage> {
  @override
  Widget build(BuildContext context) {

    String getAverage(double total, double individual) {
      double averageValue = (individual / total) * 100;
      String average = '${averageValue.toStringAsFixed(1)}%';
      return average;
    }
  
    final Food food = widget.food;
    final Serving serving = widget.serving!;

    double protein = double.parse(serving.protein.toString());
    double carbohydrate = double.parse(serving.carbohydrate.toString());
    double fat = double.parse(serving.fat.toString());

    double servingAmountD = double.parse(serving.metricservingamount.toString());

    final nutritionPerHundred = NutritionPerHundred(servingSize: servingAmountD, fat: fat, carbs: carbohydrate, protein: protein);
    final perHundred = nutritionPerHundred.calculateValuesPerHundred();
    protein = perHundred.proteinPer100g;
    carbohydrate = perHundred.carbsPer100g;
    fat = perHundred.fatPer100g;

    String proteinString = ('${protein.toString()}g');
    String carbohydrateString = ('${carbohydrate.toString()}g');
    String fatString = ('${fat.toString()}g');
    
    return Scaffold(
      appBar: AppBar(
        title: HeaderStyle('${food.foodName}'),
      ),
      body: Container(
      height: MediaQuery.of(context).size.height * 1,
      width: MediaQuery.of(context).size.width * 1,
        child: Column(
          children: [
            Divider(),
            BodyStyle('Per 100g'),
            //Nutrients per 100
            Container(
              height: MediaQuery.of(context).size.height * 0.2,
              width: MediaQuery.of(context).size.width * 1,
                child: DisplayNutrientsPerHundred(carbohydrate: carbohydrate, fat: fat, protein: protein),
            ),
            Divider(),
            //Amount Selector
            Container(
              height: MediaQuery.of(context).size.height * 0.1,
              width: MediaQuery.of(context).size.width * 1,
                child: SelectAmount(dropDownValue: dropDownValue),
            )
          ],
        ),
      ),
    );
  }
}

This is the details graph:

// ignore_for_file: sized_box_for_whitespace

import 'package:flutter/cupertino.dart';
import 'package:the_holy_trinity/modules/styles/text_styles.dart';
import 'package:the_holy_trinity/modules/widgets/nutrients_pie_chart.dart';

class DisplayNutrientsPerHundred extends StatelessWidget {
  double carbohydrate;
  double fat;
  double protein;
  DisplayNutrientsPerHundred({
    super.key,
    required this.carbohydrate,
    required this.fat,
    required this.protein,
    });

  @override
  Widget build(BuildContext context) {

    String getAverage(double total, double individual) {
      double averageValue = (individual / total) * 100;
      String average = '${averageValue.toStringAsFixed(1)}%';
      return average;
    }

    String proteinString = ('${protein.toString()}g');
    String carbohydrateString = ('${carbohydrate.toString()}g');
    String fatString = ('${fat.toString()}g');
    double totalNutrients = protein + carbohydrate + fat;
    String proteinPercent = getAverage(totalNutrients, protein);
    String carbohydratePercent = getAverage(totalNutrients, carbohydrate);
    String fatPercent = getAverage(totalNutrients, fat);
    
    return Expanded(
      child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
    Container(
      height: MediaQuery.of(context).size.height * 0.2,
      width: MediaQuery.of(context).size.width * 0.5,
      child: PieChart(sCarbsValue: carbohydrate, sFatValue: fat, sProteinValue: protein)
    ),
    Container(
      height: MediaQuery.of(context).size.height * 0.2,
      width: MediaQuery.of(context).size.width * 0.5,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
      BodyStyle('Fat: ${fatString} - ${fatPercent}\n\nCarbs: ${carbohydrateString} - ${carbohydratePercent}\n\nProtein: ${proteinString} - ${proteinPercent}'),
        ],
      ) 
    ),
    ],
      ),
    );
  }
}

This is the code for drawing the pie chart:

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class ChartData {
  final String x;
  final double y;
  final Color? color;

  ChartData(this.x, this.y, [this.color]);
}

  class PieChart extends StatelessWidget {
    final double sProteinValue;
    final double sCarbsValue;
    final double sFatValue;
  const PieChart({
    super.key,
    required this.sCarbsValue,
    required this.sFatValue,
    required this.sProteinValue,
    });

  @override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData('Fat', sFatValue, const Color.fromARGB(255, 207, 144, 196)),
            ChartData('Carbs', sCarbsValue, const Color.fromARGB(255, 126, 158, 126)),
            ChartData('Protein', sProteinValue,const Color.fromARGB(255, 230, 220, 149)),
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCircularChart(
                      legend: Legend(
                        isVisible: true,
                        position: LegendPosition.right,
                        textStyle: TextStyle(
                          fontFamily: 'Lato',
                          fontSize: 13,
                          color: Color.fromARGB(255, 138, 138, 138),
                          fontWeight: FontWeight.bold,
                          decorationColor: Color.fromARGB(255, 255, 255, 255),
                          decorationStyle: TextDecorationStyle.wavy,
                        )
                      ),
                        series: <CircularSeries>[
                            DoughnutSeries<ChartData, String>(
                                dataSource: chartData,
                                pointColorMapper:(ChartData data,  _) => data.color,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y,
                                dataLabelMapper: (ChartData data, _) => data.x,
                                startAngle: 0,
                                endAngle: 180,
                                legendIconType: LegendIconType.circle,

                            )
                        ]

                    )
                )
            )
        );
}
    }

and this is the code for selecting the size, it is that little dropdown and the textfield at the bottom

// ignore_for_file: sized_box_for_whitespace

import 'package:flutter/material.dart';
import 'package:the_holy_trinity/modules/styles/text_styles.dart';

class SelectAmount extends StatefulWidget {
  String? dropDownValue;
  SelectAmount({super.key, required this.dropDownValue});

  @override
  State<SelectAmount> createState() => _SelectAmountState();
}

class _SelectAmountState extends State<SelectAmount> {
  var dropDownValue;
  @override
  Widget build(BuildContext context) {
    return Expanded(
    child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        SizedBox(width: MediaQuery.of(context).size.width * 0.02),
        Container(
          height: MediaQuery.of(context).size.height * 0.035,
          width: MediaQuery.of(context).size.width * 0.2,
            child: const TextField(
              decoration: InputDecoration(
              disabledBorder: InputBorder.none,
              focusedBorder: InputBorder.none,
              ),
              keyboardType: TextInputType.numberWithOptions(),  
            )),
            SizedBox(width: MediaQuery.of(context).size.width * 0.05),
        Container(
          height: MediaQuery.of(context).size.height * 0.05,
          width: MediaQuery.of(context).size.width * 0.7,
            child: DropdownButton<String>(
              hint: BodyStyle('Select a value'),
              value: dropDownValue,
              onChanged: (String? newValue) {
                if (newValue == '1g') {
                  print('1g');
                } else if (newValue == '10g') {
                  print('10g');
                } else {
                  print('100g');
                }
                setState(() {
                  dropDownValue = newValue;
                  print(newValue);
                });
              },
              items: <String>['1g', '10g', '100g']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: BodyStyle(value),
                );
              }).toList(),
          ) 
        ),
        SizedBox(width: MediaQuery.of(context).size.width * 0.02),
      ],
    ),
    );
  }
}

Answer 1

I think there is an exception throw on running time mybe some thing got null value, insure that internet permission added on Android manifest

<manifest xmlns:android="...">
 <uses-permission android:name="android.permission.INTERNET"/> <!-- Add this line -->
<application
......
......
 </application>
</manifest>