Conheça seus widgets: Container em Flutter

Publicado em por
Tempo de leitura: 6 minutes

Se você é novo no flutter deve estar se perguntando o que é Container então,

Um container é um widget de conveniência que combina widgets comuns de pintura, posicionamento e dimensionamento.

Você pode usar o Container em qualquer widget para adicionar algumas propriedades de estilo.

Vamos examinar os parâmetros de um container.

Container({
  Key key,
  this.alignment,
  this.padding,
  Color color,
  Decoration decoration,
  this.foregroundDecoration,
  double width,
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform,
  this.child,
})

São muitas propriedades, mas não se preocupe, temos tudo resolvido.

Vamos mergulhar em cada propriedade.

 

Color :

Center(
  child: Container(
    color: Colors.amber,
  ),
),

Alignment Property:

Você pode usar as classes Alignment, FractionalOffset e AlignmentDirectional para a propriedade de alinhamento no Container.

Alignment

Em Alignment (0,0) significa o centro da tela, portanto, se você atribuir Alignment(0,0) à propriedade de alinhamento, ele ficará no centro da tela.

Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 200,
    ),
   alignment: Alignment(0, 0),
  ),
)

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(1.0, 1.0),
)

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(-1.0, -1.0),
)

child: Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 200,
    ),alignment: Alignment(1.0, -1.0),
  )

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(-1.0, 1.0),
)

 

Você pode usar constantes que já estão definidas pela Classe de Alinhamento.

Exemplo:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment.bottomRight,
)

Existem muitas outras constantes:

// O canto superior esquerdo.
static const Alignment topLeft = Alignment(-1.0, -1.0);
// O ponto central ao longo da aresta superior.
static const Alignment topCenter = Alignment(0.0, -1.0);
// O canto superior direito.
static const Alignment topRight = Alignment(1.0, -1.0);
// O ponto central ao longo da borda esquerda.
static const Alignment centerLeft = Alignment(-1.0, 0.0);
// O ponto central, tanto horizontal quanto verticalmente.
static const Alignment center = Alignment(0.0, 0.0);
// O ponto central ao longo da borda direita.
static const Alignment centerRight = Alignment(1.0, 0.0);
// O canto inferior esquerdo.
static const Alignment bottomLeft = Alignment(-1.0, 1.0);
// O ponto central ao longo da borda inferior.
static const Alignment bottomCenter = Alignment(0.0, 1.0);
/// O canto inferior direito.
static const Alignment bottomRight = Alignment(1.0, 1.0);

 

FractionalOffset

Você também pode usar FractionalOffset com a propriedade de alinhamento do Container.

Em FractionalOffset, (0,0) significa o canto superior esquerdo da tela, portanto, se você atribuir Alignment(0,0) à propriedade de alinhamento, ele ficará no canto superior esquerdo da tela.

FractionalOffset(double dx, double dy)

Exemplo:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: FractionalOffset(0,0),
)

Você pode usar constantes que já estão definidas pela classe FractionalOffset.

Exemplo:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: FractionalOffset.topLeft,
)

Existem muitas outras constantes:

/// O canto superior esquerdo.
static const FractionalOffset topLeft = FractionalOffset(0.0, 0.0);
/// O ponto central ao longo da aresta superior.
static const FractionalOffset topCenter = FractionalOffset(0.5, 0.0);
/// O canto superior direito.
static const FractionalOffset topRight = FractionalOffset(1.0, 0.0);
/// O ponto central ao longo da borda esquerda.
static const FractionalOffset centerLeft = FractionalOffset(0.0, 0.5);
/// O ponto central, tanto horizontal quanto verticalmente.
static const FractionalOffset center = FractionalOffset(0.5, 0.5);
/// O ponto central ao longo da borda direita.
static const FractionalOffset centerRight = FractionalOffset(1.0, 0.5);
/// O canto inferior esquerdo.
static const FractionalOffset bottomLeft = FractionalOffset(0.0, 1.0);
/// O ponto central ao longo da borda inferior.
static const FractionalOffset bottomCenter = FractionalOffset(0.5, 1.0);

AlignmentDirectional

Você também pode usar AlignmentDirectional com a propriedade de alinhamento de Container

AlignmentDirectional(this.start, this.y)

Um deslocamento expresso como uma fração de um Size, mas cujo componente horizontal depende da direção da escrita.

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: AlignmentDirectional(-1,1),
)

Você pode usar constantes que já estão definidas Classe AlignmentDirectional

Exemplo:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: AlignmentDirectional.topEnd,
)

Existem muitas outras constantes:

/// O canto superior no lado "início".
static const AlignmentDirectional topStart = AlignmentDirectional(-1.0, -1.0);
/// O ponto central ao longo da aresta superior.
///
/// Considere usar [Alignment.topCenter], pois não precisa
/// para ser [resolvido]d para ser usado.
static const AlignmentDirectional topCenter = AlignmentDirectional(0.0, -1.0);
/// O canto superior no lado "final".
static const AlignmentDirectional topEnd = AlignmentDirectional(1.0, -1.0);
/// O ponto central ao longo da aresta "inicial".
static const AlignmentDirectional centerStart = AlignmentDirectional(-1.0, 0.0);
/// O ponto central, tanto horizontal quanto verticalmente.
///
/// Considere usar [Alignment.center], pois não precisa
/// ser [resolvido]d para ser usado.
static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);
/// O ponto central ao longo da aresta "final".
static const AlignmentDirectional centerEnd = AlignmentDirectional(1.0, 0.0);
/// O canto inferior do lado "início".
static const AlignmentDirectional bottomStart = AlignmentDirectional(-1.0, 1.0);

/// O ponto central ao longo da borda inferior.
///
/// Considere usar [Alignment.bottomCenter], pois não
/// precisa ser [resolvido]d para ser usado.
static const AlignmentDirectional bottomCenter = AlignmentDirectional(0.0, 1.0);
/// O canto inferior no lado "final".
static const AlignmentDirectional bottomEnd = AlignmentDirectional(1.0, 1.0);

 

Constraint Property:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  alignment: Alignment.center,
  constraints: BoxConstraints(
    maxHeight: 400,
    maxWidth: 400,
    minHeight: 100,
    minWidth: 100,
  ),
)

 

Decoration Property:

O parâmetro da decoração é pintar atrás do chield.

Podemos usar a classe BoxDecoration para decorar o container.

Para saber mais sobre o BoxDecoration, veja o link.

Margin Property:

Uma margem é uma propriedade que especifica para adicionar espaço ao redor do container.

Fazemos isso com EdgeInsets.

EdgeInsets.all

EdgeInsets.all(double value)

Exemplo:

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),margin: EdgeInsets.all(50),
)

EdgeInsets.symmetric

EdgeInsets.symmetric({ double vertical = 0.0,
                           double horizontal = 0.0 })

Exemplo:

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.symmetric(horizontal: 70, vertical: 30),
)

EdgeInsets.fromLTRB :

EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)

Exemplo:

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.fromLTRB(20, 30, 40, 50),
)

EdgeInsets.only:

EdgeInsets.only({
  this.left = 0.0,
  this.top = 0.0,
  this.right = 0.0,
  this.bottom = 0.0
});

Exemplo:

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.only(left: 70, bottom: 50),
)

Padding Property :

Quando adicionamos padding a um widget, apenas adicionamos espaço dentro de um widget, ao contrário de margin, que adiciona espaço fora do widget.

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  padding: EdgeInsets.only(left: 70, bottom: 50),
)

Antes e depois do padding

As propriedades de EdgeInsets serão as mesmas de margin.

Você deve ter uma visão geral de um widget Container.

 
Twittar
Compartilhar
Compartilhar
0 Compart.