Conheça seus widgets: Scaffold em Flutter
Se você está aqui, deve ter acabado de começar a trabalhar no Flutter e pode ter se deparado com a ‘coisa’ do Scaffold quase todas as vezes, como TODAS AS VEZES, e tenho certeza de que deve ter se deparado com várias perguntas ambíguas.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Drawer Module"),
),
drawer: Drawer(
child: ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: Text("xyz"),
accountEmail: Text("xyz@xyz.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text("xyz"),
),
otherAccountsPictures: <Widget>[
new CircleAvatar(
backgroundColor: Colors.white,
child: Text("A"),
)
],
),Este é apenas um exemplo de módulo que mostra a raiz e o requisito básico do scaffold na construção de um aplicativo no Flutter.
Então, você deve estar curioso para saber sobre o widget Scaffold e suas propriedades em vibração. Não se preocupe, nós protegemos você, este blog fornecerá o conhecimento básico sobre o Scaffold e como usá-lo ao criar seu módulo básico.
Vamos…..
O que é Scaffold?
Um Widget Scaffold fornece uma estrutura que implementa a estrutura de layout visual de design de material básico do aplicativo flutter. Ele fornece APIs para mostrar drawers, snack bars e bottom sheets. Dê uma olhada em seu construtor e nas propriedades que ele possui. Vamos revisar seus parâmetros um por um.
//Construtor de Scaffold
const Scaffold({
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding = true,
this.primary = true,
})Scaffold contém várias funcionalidades, desde appbar, floating button, drawer, background color, bottom navigation bar, footer buttons, body. Agora, vamos explorá-los individualmente:
- appBar
Um appBar é exibido na parte superior do scaffold, é um dos principais conteúdos do Scaffold sem o qual um widget scaffold está incompleto. Ele define o que deve ser exibido na parte superior da tela. appBar usa as propriedades do widget AppBar por meio de Scaffold.appBar. Este próprio widget AppBar tem várias propriedades como title, elevation, brightness, etc, para citar alguns.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Scaffold'),
),Aqui, a propriedade title de AppBar usa o widget Text para exibir o text no app bar.
- body
body é a outra propriedade primária e mínima exigida do scaffold, que significa a área abaixo do app bar e atrás do floatingActionButton e drawer. Qualquer widget no body do scaffold é posicionado no canto top-left por padrão.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Scaffold'),
),
body: Center(
child: Text("Aqui é a HomePage",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
fontStyle: FontStyle.italic,
),
),
),Aqui, a propriedade body do Scaffold é utilizada para exibir um texto “Aqui é a HomePage”. O widget Center é usado para alinhar o texto no centro do body e um widget Text é usado para fornecer o texto junto com sua propriedade style, que fornece ao texto uma cor, tamanho e estilo de fonte. Não se preocupe, este blog não é sobre os widgets Center, Text ou TextStyle, eles serão abordados mais tarde.
- floatingActionButton
Um floatingActionButton é um button exibido flutuando acima do corpo no canto inferior direito. É um botão de ícone circular que paira sobre o conteúdo para promover uma ação primária no aplicativo. floatingActionButton usa as propriedades do widget FloatingActionButton por meio de Scaffold.floatingActionButton.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Scaffold'),
),
body: const Center(
child: Text(
"Aqui é a HomePage",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
fontStyle: FontStyle.italic,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.add),
onPressed: (){
print('Estou flutuando botão');
}
),
);
}Aqui, a propriedade de elevação do FloatingActionButton é usada, o que dá sombra ao botão e o widget Ícone é usado para dar um ícone ao botão. A propriedade onPressed fornece um retorno de chamada que é chamado quando o botão é tocado, quando você toca no botão “Estou flutuando botão” é impresso na janela do console, consulte a Figura 4 abaixo.
- floatingActionButtonLocation
Por padrão, o floatingActionButton é posicionado no canto inferior direito da tela, de modo que o nome diz floatingActionButtonLocation define a posição do floatingActionButton usando os contantes predefinidos como,
centerDocked
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
centerFloat
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
endDocked
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
endFloat
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
- drawer
Um drawer é um painel exibido ao lado do xbody, geralmente oculto em dispositivos móveis. Geralmente, é necessário deslizar da esquerda para a direita ou da direita para a esquerda para acessar o drawer.
Ele usa as propriedades do widget Drawer, que é um painel de design de material que desliza horizontalmente a partir da borda de um Scaffold para mostrar os links de navegação em um aplicativo e esse widget é usado no scaffold usando a propriedade Scaffold.drawer.
drawer: Drawer(
elevation: 16.0,
child: Column(
children: const <Widget>[
UserAccountsDrawerHeader(
accountName: Text("xyz"),
accountEmail: Text("xyz@xyz.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text("xyz"),
),
otherAccountsPictures: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
child: Text("abc"),
)
],
),
ListTile(
title: Text("Todas as caixas de entrada"),
leading: Icon(Icons.mail),
),
Divider(
height: 0.1,
),
ListTile(
title: Text("Primária"),
leading: Icon(Icons.inbox),
),
ListTile(
title: Text("Social"),
leading: Icon(Icons.people),
),
ListTile(
title: Text("Promoções"),
leading: Icon(Icons.local_offer),
)
],
),
),Aqui, a propriedade drawer do scaffold é usada para criar um drawer. Usamos vários outros widgets dentro dele para criar um drawer um pouco atraente, mas não se preocupe com todos os outros widgets, pois abordaremos na série.
- persistenteFooterButtons
persistenteFooterButtons é uma lista de botões que são exibidos na parte inferior do scaffold. Esses botões são persistentemente visíveis, mesmo que o body do scaffold role. Eles serão agrupados em um ButtonBar e renderizados acima do bottomNavigationBar, mas abaixo do body.
persistentFooterButtons: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.redAccent,
side: const BorderSide(width: 3, color: Colors.brown),
elevation: 10,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15),),
padding: const EdgeInsets.all(20),
),
onPressed: () {},
child: const Icon(
Icons.print,
color: Colors.white,
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueGrey,
side: const BorderSide(width: 1, color: Colors.yellowAccent),
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
padding: const EdgeInsets.all(20),
),
onPressed: () {},
child: const Icon(
Icons.play_arrow,
color: Colors.white,
),
),
],Aqui, persistenteFooterButtons obtém uma lista de widgets ou botões. Neste, usamos o ElevatedButton, se você quiser, pode usar o TextButton.
- bottomNavigationBar
bottomNavigationBar é usado para exibir uma barra de navegação na parte inferior do scaffold. Ele é renderizado abaixo do persistenteFooterButtons e do body.
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.teal,
items: const [
BottomNavigationBarItem(
label: 'Inicio',
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: 'Busca',
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: 'Adicione',
icon: Icon(Icons.add_box),
),
],
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
- endDrawer
Um enddrawer é como uma propriedade drawer, mas no enddrawer, por padrão, o drawer é exibido no lado direito da tela. - primary
Se o scaffold está sendo exibido na parte superior da tela. Se verdadeiro, a altura do appBar será estendida pela altura da barra de status da tela, ou seja, o preenchimento superior para. O valor padrão desta propriedade é true.
primary true primary false
- backgroundColor
Esta propriedade define a cor de fundo do scaffold.
backgroundColor: Colors.white,
- resizeToAvoidBottomInset
Se esta propriedade for verdadeira, o body e os widgets flutuantes do scaffold devem se dimensionar para evitar o teclado na tela cuja altura é definida pela propriedade bottom.
Por exemplo, se houver um teclado na tela exibido acima do scaffold, o body pode ser redimensionado para evitar a sobreposição do teclado, o que evita que os widgets dentro do body sejam obscurecidos pelo teclado. O padrão é verdadeiro.
Então, isso foi tudo sobre as várias propriedades do Scaffold, que apenas fornecem uma visão geral do Scaffold. O objetivo era familiarizar-se com diferentes propriedades e seu uso para obter mais detalhes sobre o widget Scaffold, consulte a documentação do flutter aqui.
E para qualquer outra consulta relacionada à documentação sobre flutter, clique aqui.
Verifique também o repositório do github para Scaffold.
![Rx2Firebase: Firebase + RxJava [Android]](https://capsistema.com.br/wp-content/uploads/2020/10/imagem1-4-150x150.png "Rx2Firebase: Firebase + RxJava [Android]")
