Problem rendering Container with color on Flutter Web

Viewed 27

In debugging, it doesn't show any error, but the container didn't come out colored just for the Web, as shown in the following image: Container coloring bug

There doesn't seem to be anything wrong with the code, can anyone tell me what it could be?

import 'package:flutter/material.dart';
import 'package:jumil_connect_front/utilities/constants/app_constants.dart';
import '../../widgets/dashboard/header.dart';
import '../../widgets/dashboard/top_menu.dart';

class FilesScreen extends StatefulWidget {
  static const String route = '/files';
  const FilesScreen({super.key});

  @override
  State<FilesScreen> createState() => _FilesScreenState();
}

class _FilesScreenState extends State<FilesScreen> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
        // const Header(),
        // const SizedBox(
        //   height: 5,
        //   width: double.infinity,
        //   child: Image(
        //     image: AssetImage('assets/images/color_line.png'),
        //     fit: BoxFit.fill,
        //   ),
        // ),
        // const TopMenu(),
        Row(
          children: [
            Container(
              width: 330,
              height: size.height,
              color: Colors.red
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}
2 Answers

This happened to me being hot restart. When ever I faced this issue, I follow,

  • rebuild the app again or
  • flutter clean and rebuild the app again

I used HTML rendering and the bug came up, apparently it's some canvaskit bug. I don't know if the ideal solution is to change the rendering only, but that's what solved it for me.

Using this command:

flutter run -d chrome --web-renderer html
Related