caixa 1.2.0 copy "caixa: ^1.2.0" to clipboard
caixa: ^1.2.0 copied to clipboard

O pacote caixa foi criado para simplificar e potencializar a criação de containers no Flutter, fornecendo uma solução mais flexível e reutilizável. Com a classe Caixa, você pode facilmente aplicar est [...]

Porque usar o package Caixa? #

Olá, desenvolvedores! Este pacote pode facilitar a sua vida no Flutter: o pacote Caixa. Você já deve estar familiarizado com o Container, um dos widgets mais versáteis do Flutter. No entanto, o pacote Caixa que criamos tem algumas vantagens que podem tornar seu código mais limpo e reutilizável. Vamos explorar essas vantagens!

  1. Reutilização de Configurações com a Classe Molde #

    A Caixa utiliza uma classe auxiliar chamada Molde, que permite definir um conjunto de propriedades padrão. Isso é especialmente útil quando você tem várias caixas com estilos semelhantes. Com o Molde, você pode criar um template e reutilizá-lo em várias instâncias de Caixa, economizando tempo e esforço.

  2. Facilidade de Uso para Ações com onTap #

    Diferente do Container, que não possui suporte nativo para eventos de toque, a Caixa vem com a propriedade onTap integrada. Isso significa que você pode adicionar facilmente uma ação de toque (click) diretamente na Caixa sem precisar envolver um GestureDetector ou InkWell manualmente. Isso torna seu código mais limpo e fácil de entender.

  3. Propriedades Estendidas para Personalização #

    A Caixa estende várias propriedades que o Container oferece, mas de uma maneira que permite uma personalização mais detalhada e flexível. Todas as propriedades do 'decoration' são configuradas diretamente na classe Caixa.

    Caixa(
       height: 80,
       width: 150,
       color: const Color(0xFFD81B60),
       borderRadius: BorderRadius.circular(5),
       boxShadow: const [
           BoxShadow(
           blurRadius: 10,
           color: Color.fromARGB(96, 0, 0, 0)
           )
       ],
       child: const Center(
           child: Text("Caixa", 
               style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
       ),
    ),
    
  4. Facilidade de Aplicar Efeitos de Animação #

    Com a Caixa, é fácil adicionar efeitos de toque (splash effects) usando a propriedade splashColor. Isso dá um feedback visual imediato ao usuário quando a Caixa é tocada, melhorando a experiência do usuário.

  5. Instalação #

    $ flutter pub add caixa
    
    import 'package:caixa/caixa.dart';
    

Exemplo usando molde para criar botões :

var moldeButton = Molde(
       height: 80,
       width: 150,
       color: const Color(0xFF00838F),
       borderRadius: BorderRadius.circular(5),
       boxShadow: const [
           BoxShadow(
           blurRadius: 10,
           color: Color.fromARGB(96, 0, 0, 0)
           )
       ],
);

Botão 01:

Caixa(
   molde: moldeButton,  
   onTap: () {
       print("Botão 01");
   },                 
   child: const Center(
       child: Text("Botão 01",
           style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
   ),
),

Botão 02:

Caixa(
   molde: moldeButton,  
   onTap: () {
       print("Botão 02");
   },                 
   child: const Center(
       child: Text("Botão 02",
           style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
   ),
),
0
likes
130
pub points
9%
popularity

Publisher

unverified uploader

O pacote caixa foi criado para simplificar e potencializar a criação de containers no Flutter, fornecendo uma solução mais flexível e reutilizável. Com a classe Caixa, você pode facilmente aplicar estilos personalizados, adicionar ações de toque e reutilizar configurações com a ajuda da classe Molde.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

flutter

More

Packages that depend on caixa