2
respostas

Não consigo aplicar cor de fundo

Estou na quarta aula do curso e ja tentei de tudo para aplicar a cor de fundo a tela de "search_movies.dart" mas nao consigo fazer com que seja aplicada a tela toda e fica com bordas.
Teriam alguma dica para me dar de como resolver?
Segeue abaixo a imagem e o código.
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

import 'package:cinetopia/ui/components/movie_card.dart';
import 'package:flutter/material.dart';

class Releases extends StatelessWidget {
const Releases({super.key});

@override
Widget build(BuildContext context) {
return Container(
color: Colors.deepPurple,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Image.asset("assets/popular.png", height: 80, width: 80),
),
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsetsGeometry.only(bottom: 32),
child: Center(
child: Text(
"Filmes Populares",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
),
),
SliverToBoxAdapter(
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
),
hintText: "Pesquisar",
),
),
),
SliverList.builder(
itemBuilder: (context, index) => MovieCard(),
itemCount: 10,
),
],
),
);
}
}

2 respostas

Ola!
O problema está em usar Container como raiz da tela. Ele aplica a cor apenas ao conteúdo, mas não “pega” a área toda do app (fica com bordas visíveis).

Em Flutter, a forma mais simples de aplicar cor de fundo em toda a tela é usar o Scaffold, que já cuida de ocupar 100% do espaço:

class Releases extends StatelessWidget {
  const Releases({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple, // cor de fundo da tela inteira
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Image.asset("assets/popular.png", height: 80, width: 80),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(bottom: 32),
              child: Center(
                child: Text(
                  "Filmes Populares",
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(16),
                ),
                hintText: "Pesquisar",
              ),
            ),
          ),
          SliverList.builder(
            itemBuilder: (context, index) => MovieCard(),
            itemCount: 10,
          ),
        ],
      ),
    );
  }
}

Use Scaffold em vez de Container quando quiser controlar toda a tela.
Se preferir continuar com Container, você teria que usar width: double.infinity e height: double.infinity, mas a prática recomendada no Flutter é o Scaffold.

Se nao resolver, manda o codigo completo no github pra testar aqui

apliquei o Scaffold mas mesmo assim nao funcionou no fundo todo.
Segue o link do codigo no github: https://github.com/Glaubert01/Cinetopia-Flutter