- como posso adicionar uma borda arredondada a um Container no Flutter?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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),
),
),
),
),
),
);
}
}
Configuração do Container:
O Container é configurado com uma largura e altura específicas, mas você pode ajustar esses valores conforme necessário.
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.
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.
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.
Abs.