dashed_container

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

O pacote dashed_container é um plugin do Flutter que simplifica a criação de bordas tracejadas ao redor de widgets. Ele fornece um container fácil de usar com estilos de linha tracejada personalizáveis, incluindo comprimento da traça, espaço entre traços, cor e espessura da linha. Ideal para elementos de interface que exigem separação visual ou destaque, como campos de formulário, cartões ou contornos decorativos. O pacote utiliza o sistema de pintura do Flutter para renderizar linhas tracejadas suaves e escaláveis sem código de pintura personalizada complexo. Integra-se perfeitamente em projetos existentes do Flutter por meio de uma dependência simples no pub.

Casos de uso

Adicionando bordas tracejadas a componentes da interface
Criando realces de campo de formulário
Projetando contornos decorativos de cartões
Separação visual em layouts
Personalizando a estética da borda

Principais recursos

API simples para bordas tracejadas
Comprimento e intervalo de traço configuráveis
Suporte para cores personalizadas e largura de traço
Leve e eficiente
Funciona com qualquer widget dentro

Indicado para

Designers de UI procurando variedade visual
Desenvolvedores construindo formulários ou cartões
Projetos que precisam de decoração leve
Iniciantes do Flutter explorando bordas personalizadas
Aplicativos com design moderno e minimalista

Considerações

Limitado apenas à decoração da borda
Sem suporte para preenchimentos tracejados
Não lida com recortes complexos
Mais adequado para formas retangulares simples
Pode exigir alinhamento manual em layouts complexos

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

A Dashed Container plugin for Flutter, easy to implement dashed line for your widgets

Demo

Demo:

Usage

To use plugin, just import package import 'package:dashed_container/dashed_container.dart';

Example

You can check example directory to know how to use it like the demo image.

    import 'package:flutter/material.dart';
    import 'package:dashed_container/dashed_container.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);

      final String title;

      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text(widget.title)),
          body: SingleChildScrollView(
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Line container - blankLength = 0'),
                  _buildSpace(),
                  DashedContainer(
                    child: Container(
                      height: 200.0,
                      width: 200.0,
                      decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(10.0)),
                    ),
                    dashColor: Colors.black,
                    borderRadius: 10.0,
                    dashedLength: 30.0,
                    blankLength: 0.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                  Text('Dashed container - rectangle'),
                  _buildSpace(),
                  DashedContainer(
                    child: Container(
                      height: 100.0,
                      width: 200.0,
                      decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(20.0)),
                    ),
                    dashColor: Colors.black,
                    borderRadius: 20.0,
                    dashedLength: 30.0,
                    blankLength: 6.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                  Text('Dashed container - circle'),
                  _buildSpace(),
                  DashedContainer(
                    child: Container(
                      height: 200.0,
                      width: 200.0,
                      decoration: BoxDecoration(color: Colors.orange, shape: BoxShape.circle),
                    ),
                    dashColor: Colors.black,
                    boxShape: BoxShape.circle,
                    dashedLength: 30.0,
                    blankLength: 6.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                  Text('Dashed container - custom'),
                  _buildSpace(),
                  DashedContainer(
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: FlutterLogo(
                        size: 80,
                      ),
                    ),
                    dashColor: Colors.black,
                    boxShape: BoxShape.circle,
                    dashedLength: 30.0,
                    blankLength: 6.0,
                    strokeWidth: 6.0,
                  ),
                  _buildSpace(),
                ],
              ),
            ),
          ),
        );
      }

      Widget _buildSpace() {
        return SizedBox(height: 10.0);
      }
    }

Buscar pacotes, repositórios e categorias de apps