- 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.