Começamos a nova semana com outra interpretação da documentação oficial do Flutter em um formato de perguntas e respostas. A parte 4 aborda o estilo comparativo de Flutter para desenvolvedores da web. É inteiramente dedicado ao layout e não sai tão volumoso quanto os anteriores. Tradicionalmente, recomendo a todos os desenvolvedores da Web interessados em Flutter que procurem por baixo do gato para ver se vale a pena experimentar essa estrutura e quanto esforço será necessário.
Se não houver informações suficientes aqui ou se você tiver experiência em desenvolvimento nativo para uma plataforma específica, recomendo procurar em outras partes:Flutter. Parte 1. Para desenvolvedores do AndroidFlutter. Parte 2. Para desenvolvedores do iOSFlutter. Parte 3. Para reagir a desenvolvedores NativeFlutter. Parte 4. Para desenvolvedores da webFlutter. Parte 5. Para desenvolvedores do Xamarin.FormsConteúdo:
- Layout básico
- Posições e tamanhos
- A forma
- Texto
Layout básico
Questão:
Como estilizar e alinhar o texto?Responda:
Usando TextStyle .Exemplo:
HTML / CSS<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Georgia;
}
Fluttervar container = Container(
child: Text(
"Lorem ipsum",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão:
Como é definida a cor de fundo?Responda
Usando a classe BoxDecoration .Diferenças
Uma propriedade background-color
em CSS é responsável apenas pela cor do plano de fundo. O BoxDecoration é responsável por uma gama mais ampla de propriedades, como cantos arredondados, bordas etc.Exemplo
HTML / CSS<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
}
Fluttervar container = Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
width: 320,
height: 240,
decoration: BoxDecoration(
color: Colors.grey[300],
),
);
Questão:
Como centralizar os componentes?Responda
Usando o widget Center .Exemplo
HTML / CSS<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
Fluttervar container = Container(
child: Center(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão:
Como definir a largura do contêiner?Responda
Usando propriedade width
.Diferenças
Os widgets de vibração têm uma propriedade width
fixa. Para configurar maxWidth
ou minWidth
, use o widget BoxConstraints .Exemplo:
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
width: 100%;
max-width: 240px;
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
width: 240,
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Posições e tamanhos
Questão
Como estabelecer uma posição absoluta?Responda
Usando o widget Posicionado dentro do widget Pilha .informação adicional
Por padrão, os widgets são posicionados dentro dos widgets pai.Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
position: relative;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
position: absolute;
top: 24px;
left: 24px;
}
Fluttervar container = Container(
child: Stack(
children: [
Positioned(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
left: 24,
top: 24,
),
],
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão
Como definir a rotação dos componentes?Responda
Usando o widget Transformar .Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
transform: rotate(15deg);
}
Fluttervar container = Container(
child: Center(
child: Transform(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
alignment: Alignment.center,
transform: Matrix4.identity()
..rotateZ(15 * 3.1415927 / 180),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão
Como dimensionar componentes?Responda
Usando o widget Transformar .Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
transform: scale(1.5);
}
Fluttervar container = Container(
child: Center(
child: Transform(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
alignment: Alignment.center,
transform: Matrix4.identity()
..scale(1.5),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão
Como aplicar um gradiente?Responda
Usando a classe BoxDecoration e suas propriedades gradient
.Exemplo
Gradiente linear verticalHTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
padding: 16px;
color: #ffffff;
background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: const Alignment(0.0, -1.0),
end: const Alignment(0.0, 0.6),
colors: <Color>[
const Color(0xffef5350),
const Color(0x00ef5350)
],
),
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Gradiente linear horizontalHTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
padding: 16px;
color: #ffffff;
background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: const Alignment(-1.0, 0.0),
end: const Alignment(0.6, 0.0),
colors: <Color>[
const Color(0xffef5350),
const Color(0x00ef5350)
],
),
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
A forma
Questão
Como arredondar cantos?Responda
Usando a classe BoxDecoration e suas propriedades borderRadius
.Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
border-radius: 8px;
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
borderRadius: BorderRadius.all(
const Radius.circular(8),
),
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão
Como adicionar uma sombra?Responda
Usando a classe BoxShadow .informação adicional
BoxShadow é usado como parte boxShadow
da propriedade da classe BoxDecoration .Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
0 6px 20px rgba(0, 0, 0, 0.5);
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: BoxDecoration(
color: Colors.red[400],
boxShadow: [
BoxShadow (
color: const Color(0xcc000000),
offset: Offset(0, 2),
blurRadius: 4,
),
BoxShadow (
color: const Color(0x80000000),
offset: Offset(0, 6),
blurRadius: 20,
),
],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
decoration: BoxDecoration(
color: Colors.grey[300],
),
margin: EdgeInsets.only(bottom: 16),
);
Questão
Como fazer formas redondas e elípticas?Responda
Usando a enum
classe BoxShape .informação adicional
BoxShape é usado como parte da propriedade shape da classe BoxDecoration .Exemplo
HTML / CSS<div class="greybox">
<div class="redcircle">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redcircle {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
text-align: center;
width: 160px;
height: 160px;
border-radius: 50%;
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.red[400],
shape: BoxShape.circle,
),
padding: EdgeInsets.all(16),
width: 160,
height: 160,
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Texto
Questão
Como ajustar a distância entre o texto?Responda
Usando a classe TextStyle e suas propriedades letterSpacing
e wordSpacing
.Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
letter-spacing: 4px;
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w900,
letterSpacing: 4,
),
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão
Como formatar parte do texto?Responda
Usando o widget RichText e a classe TextSpan .Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem <em>ipsum</em>
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
}
.redbox em {
font: 300 48px Roboto;
font-style: italic;
}
Fluttervar container = Container(
child: Center(
child: Container(
child: RichText(
text: TextSpan(
style: bold24Roboto,
children: <TextSpan>[
TextSpan(text: "Lorem "),
TextSpan(
text: "ipsum",
style: TextStyle(
fontWeight: FontWeight.w300,
fontStyle: FontStyle.italic,
fontSize: 48,
),
),
],
),
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
Questão
Como limitar a exibição de texto longo?Responda
Com a ajuda dos widgets maxLines
e o overflow
widget de texto .Exemplo
HTML / CSS<div class="greybox">
<div class="redbox">
Lorem ipsum dolor sit amet, consec etur
</div>
</div>
.greybox {
background-color: #e0e0e0;
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350;
padding: 16px;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Fluttervar container = Container(
child: Center(
child: Container(
child: Text(
"Lorem ipsum dolor sit amet, consec etur",
style: bold24Roboto,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);
No final de dezembro de 2019, com o lançamento do Flutter 1.12, o suporte da Web entrou na versão beta! E são ótimas notícias, o que significa que, em um futuro próximo, cada vez mais veremos sites escritos em Flutter. Portanto, se você ainda estiver pensando, recomendo tentar essa estrutura e espero que meu artigo tenha sido útil. E isso é tudo por hoje. O Google não pode quebrar seu Chrome!