Package detailsv1.0.0

bootstrap_flutter

Aplicação de responsividade do bootstrap para facilitar a criação de multiplos tamanhos de telas em seus projetos

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 50
Likes: 31
Pub points: 140

Install package

flutter pub add bootstrap_flutter

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Bootstrap Flutter is a responsive UI package that brings the familiar Bootstrap grid system to Flutter, enabling developers to easily create layouts that adapt across multiple screen sizes. It provides a set of responsive utility classes and widgets inspired by Bootstrap's design principles, simplifying the process of building cross-platform apps with consistent, scalable designs. Ideal for projects requiring flexible, mobile-first layouts on Android, iOS, Web, macOS, Windows, and Linux.

Use cases

Building responsive dashboards
Creating multi-device compatible interfaces
Simplifying layout management across platforms
Designing mobile-first applications
Rapid prototyping with consistent spacing
Adapting UIs for different screen densities

Key features

Bootstrap-inspired grid system
Responsive utility classes
Cross-platform compatibility
Flexible layout components
Easy integration with existing Flutter projects
Support for breakpoints and media queries

Suitable for

Developers familiar with Bootstrap
Projects targeting multiple platforms
Teams prioritizing rapid UI development
Apps requiring adaptive layouts
Frontend-focused Flutter developers
Design systems needing consistency

Considerations

May add overhead for simple apps
Learning curve for non-Bootstrap users
Limited customization compared to raw Flutter
Depends on external maintenance
Not ideal for highly custom UIs
Potential bundle size increase

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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

Dependencies

Dependency list 1 items

golden_toolkit^0.11.0

Source repository

gabuldev/bootstrap_flutter