0

Sou iniciante em Flutter/Dart. Em uma de minhas práticas deparei com um "child: wrap" onde coloquei vários containers. Em cada container coloquei a seguintes propriedades:

child: Wrap(
        alignment: WrapAlignment.center,
        runSpacing: 10,
        spacing: 10,
        children: [
          Container(
            width: largura,
            height: altura,
            decoration: BoxDecoration(
                color: Colors.blueGrey,
                border: Border.all(
                  color: Colors.black, //color of border
                  width: 1, //width of border
                ),
                borderRadius: BorderRadius.circular(5)),
          ),
          Container(
            width: largura,
            height: altura,
            decoration: BoxDecoration(
              color: Colors.amber,
              border: Border.all(
                color: Colors.black,
                width: 2,
              ),
              borderRadius: BorderRadius.circular(10),
            ),
          ),

A minha dúvida é: Como faço para NÃO REPETIR as propriedades:valores do "decoration : BoxDecoration", uma vez que são repetidos para todos os containers que colocar? Algo como classes CSS.

Teria como gerar classes? Poderia utilizar variáveis? Seria o caso de utilizar Lista?

1 Resposta 1

1

Você pode criar uma variável do tipo BoxDecoration, caso os valores forem ser sempre constantes, ou criar um método que retorne sua estilização baseada em alguns valores que possam variar.

Deixei um exemplo abaixo com ambas as formas:

Você pode usar o Dartpad para testar.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final _containerDecoration = BoxDecoration(
    color: Colors.amber,
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(10),
  );
  
 BoxDecoration _containerDecorationWithColor(Color color) => BoxDecoration(
    color: color,
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(10),
  );

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 100,
          height: 100,
          decoration: _containerDecoration,
        ),
        Container(
          width: 100,
          height: 100,
          decoration: _containerDecoration,
        ),
        Container(
          width: 100,
          height: 100,
          decoration: _containerDecorationWithColor(Colors.red),
        ),
      ],
    );
  }
}

Boas práticas

Uma boa prática é que quando você for trabalhar com estilos, onde possam existir vários, que serão reaproveitados no projeto é você criar um arquivo apenas para armazenar esses estilos, deixando assim seu código mais organizado e limpo.

Caso queira pode fazer da seguinte forma também:

class EstiloContainers {
  final containerDecoration = BoxDecoration(
    color: Colors.amber,
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(10),
  );

  BoxDecoration containerDecorationWithColor(Color color) => BoxDecoration(
        color: color,
        border: Border.all(
          color: Colors.black,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(10),
      );
}

E para utilizar é simples, basta apenas instânciar a classe:

final estilos = EstiloContainers();
estilos.containerDecoration;

Não entrarei em mais detalhes sobre o assunto aqui, mas para melhorar ainda mais a classe de estilos, ela poderia possuir métodos estáticos, para não precisar ser instânciada para acessar seus métodos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .