- como posso adicionar uma borda arredondada a um Container no Flutter?
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.