Entrar Ainda não tem acesso?
2
respostas

Resolução do desafio

Referente ao curso Flutter: Widgets, Stateless, Stateful, Imagens e Animações, no capítulo Utilizando Widgets e atividade Faça como eu fiz: uma nova tela

por Jonatas Flores Viana Dos Santos
| 7.8k xp | 19 posts

Nesse exemplo tive uma certa dificuldade com o fundo black, mais consegui de uma forma com uso do Scafford, estou usando VScode pois roda mais leve pra mim é melhor a vivência com ele enfim o código

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
        theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home:Scaffold(
        backgroundColor: Colors.black,
          body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                color: Colors.red,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.green,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.purple,
                width: 50,
                height: 50,
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                color: Colors.deepOrangeAccent,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.cyan,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.pinkAccent,
                width: 50,
                height: 50,
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                color: Colors.amber,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.blue,
                width: 50,
                height: 50,
              ),
              Container(
                color: Colors.white,
                width: 50,
                height: 50,
              ),
            ],
          ),
        ],
      ),
      ), 
      
    );
  }
}

RESULTADO:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Jonatas, tudo bem?

Parabéns pelo resultado e agradeço por compartilhar seu código. Tenho certeza que sua contribuição vai ser muito valiosa para a comunidade do fórum!

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum.

Abraços e bons estudos!

por Gabriel Fernandes Gomes
| 31.6k xp | 11 posts
Programador

Antes de iniciar o desafio, eu usei o Paint para criar um diagrama do layout que precisava construir. Esse esboço me ajudou a visualizar quais widgets seriam necessários. Vou explicar detalhadamente o processo que segui.

  1. Planejamento do Layout

Esboço no Paint:

Desenhei um layout básico no Paint. Imaginei um fundo preto com três linhas de widgets coloridos.

Identificação dos Widgets:

Precisei de um widget que permitisse definir uma cor de fundo preta. O fundo precisaria ter várias linhas e cada linha teria três widgets coloridos.

  1. Escolha dos Widgets

Widget de Fundo:

O widget de fundo precisava ter duas propriedades importantes:

Definir a cor de fundo. Permitir ter vários filhos. Não conhecendo um único widget que atendesse ambas as necessidades, decidi usar componentes aninhados.

Componente Container:

O widget Container permite definir a cor de fundo, o que resolvia a primeira necessidade. No entanto, o Container só permite um único filho.

Componente Column:

Para organizar as linhas de widgets, usei o widget Column, que permite múltiplos filhos. Ele também facilita a definição do espaçamento vertical entre as linhas.

Componente Row:

Para cada linha de widgets, utilizei o widget Row, que permite definir o espaçamento horizontal entre os widgets internos. Cada Row continha três Container para representar os widgets coloridos.

  1. Implementação do Código

Com base no meu planejamento e na escolha dos widgets, o código ficou assim:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Container(
        color: Colors.black,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.orange,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.yellow,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.lightBlue[200],
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.purple,
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.pink[600],
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.white,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Meu esboço feito no mspaint:

Esboço feito no mspaint

Uma digrama que me ajuda muito: Diagrama para entender melhor os widgets Column e Row

Resultado final:

Resultado final