Search code examples
flutterflutter-web

Problem rendering Container with color on Flutter Web


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

Solution

  • 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