Home > Back-end >  Problem rendering Container with color on Flutter Web
Problem rendering Container with color on Flutter Web

Time:09-16

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

CodePudding user response:

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

CodePudding user response:

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