Alguns pacotes para o Dart/Flutter para tornar sua aplicação mais bonita

Boora lá pessoal, então hoje vamos ver alguns pacotes que podem tornar a sua aplicação mais linda para o usuário final, assim criando valor e fazendo com que os usuários se sintam mais felizes utilizando seu app.

Styled Widget Esse Widget é construído como uma ferramenta para aprimorar sua experiência de desenvolvimento no Flutter e para se integrar perfeitamente com sua base de código.

Exemplo:

Icon(OMIcons.home, color: Colors.white)
  .padding(all: 10)
  .decorated(color: Color(0xff7AC1E7), shape: BoxShape.circle)
  .padding(all: 15)
  .decorated(color: Color(0xffE8F2F7), shape: BoxShape.circle)
  .padding(all: 20)
  .card(
    elevation: 10,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  )
  .alignment(Alignment.center)
  .backgroundColor(Color(0xffEBECF1));

Styled Widget

Flui

Um framework topp para o Flutter, onde você tem disponível um acervo gigantesco de Widgets para serem utilizados!

Exemplo:

FLAppBarTitle(
    title: 'AppBar',
    subtitle: '(subtitle)',
    layout: FLAppBarTitleLayout.vertical,
    showLoading: true
)

Flui

Responsive Framework

Esse pacote faz a adaptação da sua UI para os diferentes tamanhos de tela dos dispositivos de forma automática, você apenas precisa se preocupar em criar sua tela.

Exemplo:

MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
          child,
          maxWidth: 1200,
          minWidth: 480,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(480, name: MOBILE),
            ResponsiveBreakpoint.autoScale(800, name: TABLET),
            ResponsiveBreakpoint.resize(1000, name: DESKTOP),
          ],
          background: Container(color: Color(0xFFF5F5F5))),
      initialRoute: "/",
    )

Responsive framework

Flutter Neumorphic

Esse pacote faz a criação de itens em 3d para você mostrar ao seu usuário, é muito interessante para criar splash screens e afins.

Exemplo:

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)), 
    depth: 8,
    lightSource: LightSource.topLeft,
    color: Colors.grey
  ),
  child: ...
)

Flutter Neumorphic

Blog

Alguns pacotes para o Dart/Flutter para tornar sua aplicação mais bonita

Henrique Pomatti dos Santos

Join Our Newsletter. No Spam, Only the good stuff.

Related