Flutter Footer Widget

Tempo de leitura: 5 minutes

Um novo pacote Flutter que ajuda os desenvolvedores a criar um rodapé rolável personalizável para aplicativos Android e IOS.

Veja o pacote aqui na loja do pub.

Neste tutorial, mostrarei como você pode criar seu próprio widget de rodapé personalizado no flutter usando o pacote que criei chamado footer.

Começando o Exemplo

Para usar este pacote:

  • Adicione o footer de dependência ao seu arquivo pubspec.yaml.
dependencies:
  flutter:
     sdk:flutter
  footer:

 

Importações

Para poder usar a classe FooterView você precisa importar as classes de footer da biblioteca

import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';

 

Classe FooterView

O footer flutter usa um componente chamado FooterView. O Componente FooterView usa 3 argumentos que são os seguintes:

  1. children : esta é uma lista rolável de widgets
  2. footer: usa um componente de rodapé que usa um widget personalizável, por exemplo, um widget de contêiner
  3. flex : Isso leva um número inteiro de 1 a 10. Isso flexiona o espaço do rodapé da tela com 2 sendo o padrão.

NB: Os parâmetros filhos e rodapé são obrigatórios. Consultar exemplo

import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';


@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: new Text('Footer View Example')
      ),
      body: new FooterView(
        children:<Widget>[
          new Padding(
            padding: new EdgeInsets.only(top:200.0),
            child: Center(
              child: new Text('Scrollable View'),
            ),
          ),
        ],
        footer: new Footer(
          child: Text('I am a Customizable footer!!'),
          padding: EdgeInsets.all(10.0),
        ),
        flex: 1, //default flex is 2
      ),
    );
  }

O Componente Footer recebe quatro argumentos, sendo um deles Obrigatório, ou seja, Widget children, veja a o exemplo acima.

 

Exemplo Simples

Neste exemplo, mostrarei como você pode simplesmente usar o Widget FooterView dentro de um corpo Scaffold.

  • Observe que quando a lista de filhos não estiver transbordando, o Rodapé será fixado logo na parte inferior da Página.
  • Se houver estouro, toda a página ficará rolável e o rodapé não será corrigido. Veja a imagem gif abaixo.
import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: new Text('Footer View Example')
      ),
      body: new FooterView(
        children:<Widget>[
          new Padding(
            padding: new EdgeInsets.only(top:200.0),
            child: Center(
              child: new Text('Scrollable View'),
            ),
          ),
        ],
        footer: new Footer(
          child: Padding(
            padding: new EdgeInsets.all(10.0),
            child: Text('I am a Customizable footer!!')
          ),
        ),
        flex: 1, //default flex is 2
      ),
    );
  }

Então, como você provavelmente pode ver, por padrão, o widget alinha o rodapé na parte inferior da página. Assim como qualquer outro rodapé.
Para alterar o espaço ocupado pelo Widget Footer personalizável, você teria que alterar e brincar com a propriedade flex no FooterView de 1 a 10 . Com o padrão sendo flex 2, que ocupa apenas 20% da página de baixo para cima, o que significa que, se você atribuir flex: 1, leva 10%, flex: 3, 30% e assim por diante.

Agora é hora de tornar nosso rodapé mais atraente. Nesta seção, adicionarei uma linha de ícones e o campo de texto. Veja a imagem do código abaixo

Portanto, no código acima, substituí o filho Text pelo Padding . O Padding tem uma Row com um Card cada contendo um ícone. Escondi os outros dois Containers com cartão pois usam o mesmo código, só para reduzir o espaço.

Você provavelmente também pode perceber que dentro do widget Footer eu também adicionei padding e backgroundColor, que são o padrão, provavelmente não mudarão nada se você não fizer isso.

Veja a saída de imagem do código acima.

Por último, mas não menos importante, adicionarei um monte de texto e preenchimento logo abaixo de nossa linha de ícones apenas para torná-la mais viva. Veja o código abaixo

Demonstração Scrollable FooterView

 

Abaixo está um exemplo completo

import 'package:flutter/material.dart';
import 'package:footer/footer.dart';
import 'package:footer/footer_view.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  static Map<int, Color> color = {
    50:Color.fromRGBO(4, 131, 184, .1),
    100:Color.fromRGBO(4, 131, 184, .2),
    200:Color.fromRGBO(4, 131, 184, .3),
    300:Color.fromRGBO(4, 131, 184, .4),
    400:Color.fromRGBO(4, 131, 184, .5),
    500:Color.fromRGBO(4, 131, 184, .6),
    600:Color.fromRGBO(4, 131, 184, .7),
    700:Color.fromRGBO(4, 131, 184, .8),
    800:Color.fromRGBO(4, 131, 184, .9),
    900:Color.fromRGBO(4, 131, 184, 1),
  };
  //MaterialColor myColor = MaterialColor(0xFF162A49, color);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Footer',
      theme: ThemeData(
        primarySwatch: MaterialColor(0xFF162A49, color),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: FooterPage(),
    );
  }
}
class FooterPage extends StatefulWidget {
  @override
  FooterPageState createState() {
    return new FooterPageState();
  }
}
class FooterPageState extends State<FooterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new  Text('Flutter Footer View',style: TextStyle(fontWeight:FontWeight.w200),)
      ),
      drawer: new Drawer(),
      body: FooterView(
          children: <Widget>[
            new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Padding(
                  padding: EdgeInsets.only(top:50,left: 70),
                    child: new Text('Scrollable View Section'),
                )
              ],
            ),
          ],
          footer: new Footer(
              child: new Padding(
              padding: EdgeInsets.all(5.0),
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children:<Widget>[
                  new Center(
                    child:new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        new Container(
                          height: 45.0,
                          width: 45.0,
                          child: Center(
                            child:Card(
                              elevation: 5.0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
                              ),
                              child: IconButton(
                                icon: new Icon(Icons.audiotrack,size: 20.0,),
                                color: Color(0xFF162A49),
                                onPressed: () {},
                              ),
                            ),
                          )
                        ),
                        new Container(
                          height: 45.0,
                          width: 45.0,
                          child: Center(
                            child:Card(
                              elevation: 5.0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
                              ),
                              child: IconButton(
                                icon: new Icon(Icons.fingerprint,size: 20.0,),
                                color: Color(0xFF162A49),
                                onPressed: () {},
                              ),
                            ),
                          )
                        ),
                        new Container(
                          height: 45.0,
                          width: 45.0,
                          child: Center(
                            child:Card(
                              elevation: 5.0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
                              ),
                              child: IconButton(
                                icon: new Icon(Icons.call,size: 20.0,),
                                color: Color(0xFF162A49),
                                onPressed: () {},
                              ),
                            ),
                          )
                        ),
                      ],
                    ),
                  ),
                  Text('Copyright ©2020, All Rights Reserved.',style: TextStyle(fontWeight:FontWeight.w300, fontSize: 12.0, color: Color(0xFF162A49)),),
                  Text('Powered by Nexsport',style: TextStyle(fontWeight:FontWeight.w300, fontSize: 12.0,color: Color(0xFF162A49)),),
                ]
              ),
            ),
          )
      ),
      floatingActionButton: new FloatingActionButton(
              elevation: 10.0,
              child: new Icon(Icons.chat),
              backgroundColor: Color(0xFF162A49),
              onPressed: (){
              }
      ),
    );
  }
}

 

Resumo

  • Pacote Footer que permite criar seu próprio rodapé personalizável.
  • O pacote fornece o plano de fundo padrão onde o rodapé e o restante do conteúdo da página devem ser colocados.