Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Flutter

  • como posso adicionar uma borda arredondada a um Container no Flutter?
2 respostas
solução!

Oi, estudante. Tudo bem?

Pra adicionar uma borda arredondada a um Container no Flutter, você pode usar o widget Container com a propriedade decoration. Dentro da propriedade decoration, você pode usar BoxDecoration para definir as características visuais do container, incluindo a borda arredondada.

Um exemplo simples de como adicionar uma borda arredondada a um Container:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container com Borda Arredondada'),
        ),
        body: Center(
          child: Container(
            width: 200.0,
            height: 100.0,
            decoration: BoxDecoration(
              color: Colors.blue, // Cor de fundo do container
              borderRadius: BorderRadius.circular(20.0), // Bordas arredondadas
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  spreadRadius: 2,
                  blurRadius: 5,
                  offset: Offset(0, 3),
                ),
              ],
            ),
            child: Center(
              child: Text(
                'Texto dentro do Container',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Explicação

  1. Configuração do Container: O Container é configurado com uma largura e altura específicas, mas você pode ajustar esses valores conforme necessário.

  2. Propriedade decoration: A propriedade decoration é usada para definir o estilo visual do container. Aqui, BoxDecoration é utilizado para adicionar uma cor de fundo, bordas arredondadas e uma sombra.

  3. borderRadius: A propriedade borderRadius dentro de BoxDecoration é usada para definir a borda arredondada. BorderRadius.circular(20.0) cria bordas arredondadas com um raio de 20 pixels. Você pode ajustar o valor para obter o arredondamento desejado.

  4. Sombra: A propriedade boxShadow é opcional e adiciona uma sombra ao container para dar um efeito de profundidade.

Usando este método, você pode facilmente adicionar bordas arredondadas e outros estilos visuais ao seu Container no Flutter.

Espero ter ajudado.

Um abraço e bons estudos.

  • Muito bom! Valeu, deu super certo aqui.

Abs.