bootstrap_flutter

Visão geral do pacote

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

Bootstrap Flutter é um pacote de interface responsiva que traz o conhecido sistema de grade Bootstrap para o Flutter, permitindo que desenvolvedores criem facilmente layouts que se adaptam a múltiplos tamanhos de tela. Ele fornece um conjunto de classes utilitárias responsivas e widgets inspirados nos princípios de design do Bootstrap, simplificando o processo de construção de aplicativos multiplataforma com designs consistentes e escaláveis. Ideal para projetos que exigem layouts flexíveis e voltados para dispositivos móveis em Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

Construindo painéis responsivos
Criando interfaces compatíveis com múltiplos dispositivos
Simplificando o gerenciamento de layout entre plataformas
Projetando aplicativos com foco em dispositivos móveis
Prototipagem rápida com espaçamento consistente
Adaptando interfaces para diferentes densidades de tela

Principais recursos

sistema de grade inspirado no Bootstrap
classes utilitárias responsivas
Compatibilidade multiplataforma
Componentes de layout flexíveis
Integração fácil com projetos Flutter existentes
Suporte para pontos de interrupção e consultas de mídia

Indicado para

Desenvolvedores familiarizados com o Bootstrap
Projetos direcionados para múltiplas plataformas
Equipes priorizando o desenvolvimento rápido da interface
Aplicativos que exigem layouts adaptativos
Desenvolvedores Flutter voltados para o frontend
Sistemas de design que precisam de consistência

Considerações

Pode adicionar sobrecarga para aplicativos simples
Curva de aprendizado para usuários não-Bootstrap
Personalização limitada em comparação com o Flutter nativo
Depende de manutenção externa
Não ideal para interfaces de usuário altamente personalizadas
Aumento potencial no tamanho do pacote

README original

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

Intro

Package criado para facilitar o uso do Flutter em multiplos tamanhos de telas. Com esse package você vai conseguir fazer que o mesmo layout tenha comportamentos diferentes para dispositivos, mobile, tablet, web e desktop.

Conceitos

Utilizamos da padronização do bootstrap para fazer a arranjo das telas de forma simples através de uma simples string;

Size	Type	Tag	Column	Divisions
<768px	Mobile	xs-	auto	12
>= 768px	Tablet	sm-	~62px	12
>= 992px	Web	md-	~81px	12
>= 1200px	Desktop	lg-	~97px	12

Utilização

Para utilizar o bootstrap em sua página basta usar nosso widget ScaffoldBootstrap como pai dos widgets de sua tela.

return ScaffoldBootstrap(children: <Component>[]);

Precisamos agora criar os components responsivos e seus respectivos comportamentos

return ScaffoldBootstrap(children: [
  Component(style: "lg-4 md-4 sm-4 xs-4 xs:h\4", child: YourWidget())
]);

Nesse exemplo acima estamos dizendo que queremos usar 4 partes das 12 disponíveis na tela para todos os tipos de tela, mas quando for uma tela xs queremos que ocupe 1/4 da altura da tela ( deixando o widget menor quando está na tela de um dispositivo mobile por exemplo).

Você pode definir a altura máxima para todos os tipos de tela, para isso basta definir qual tela quer adicionar essa propriedade e depois adicionar os dois pontos.

xs:h/4
xs:h*2
md: h*3

Importante

Esse package está na sua primeira versão, então pedimos para todas as issues reportagem o mais rápido possível ou subir uma correção para deixarmos o mais alinhado e utilizável possível.

Agradecimento

Package desenvolvimento por Gabul Dev, qualquer coisa só chamar nas redes sociais para tirar dúvidas

Buscar pacotes, repositórios e categorias de apps

Instalar pacote