Hoje vou demonstrar como podemos criar uma tela de chat com um visual bacana.
Um visual com bordas superiores, BottomAppBar com um FloatingActionButton no centro do aplicativo e um notch transparente.
O fonte do aplicativo você pode encontrar no meu github.
Dentro do Scaffold, a primeira coisa que temos que adicionar é extendBody: true para que nosso BottomAppBar deixe transparente nosso notch.
Depois, na nossa appBar você pode criar como desejar. No nosso caso ficou dessa forma:
appBar: AppBar( leading: Icon(Icons.more_vert), iconTheme: IconThemeData(color: Colors.white), title: Text('Chat'), centerTitle: true, backgroundColor: Colors.indigo, elevation: 0, actions: [ Padding( padding: const EdgeInsets.only(right: 10), child: Icon(Icons.search), ) ], ),
Atenção para o elevation: 0, pois não queremos que nossa appBar tenha sombra.
Agora no nosso body, teremos que adicionar um Container e um decoration para que as bordas superiores fiquem redondas. Para isso utilize:
Container( decoration: new BoxDecoration( color: Colors.white, borderRadius: new BorderRadius.only( topLeft: const Radius.circular(18.0), topRight: const Radius.circular(18.0), ), ), child: ListView.builder( itemCount: 26, itemBuilder: (context, i) { return ListTile( leading: CircleAvatar( radius: 30.0, backgroundImage: NetworkImage("https://media-exp1.licdn.com/dms/image/C4D03AQH-X7AenooDvw/profile-displayphoto-shrink_100_100/0?e=1604534400&v=beta&t=3uu41paJLzrSdYcb5bPYdTXtdPj4KUg5z-hRoc1cwxI"), backgroundColor: Colors.transparent, ), title: Text( 'Chrystoffer Kugler Horochovec', style: TextStyle(fontSize: 12), ), subtitle: Text( 'Chat UI Example', style: TextStyle(fontSize: 10), ), trailing: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: [ Text( '15:30', style: TextStyle(color: Colors.grey, fontSize: 10), ), Icon( Icons.check, color: Colors.indigo, size: 12, ) ], ), ), ); }, ),
Nesse exemplo eu utilizei bordas tamanho 18… fique a vontade para utilizar qual você quiser. Outro detalhe, no CircleAvatar utilizamos o radius: 30.0 e um backgroundImage para que a imagem fique redonda.
Depois somente uma ListView.builder passando para gerar 26 itens iguais sem nenhum segredo.
Agora iremos criar nosso FloatActionButton centralizada no nosso aplicativo:
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: FloatingActionButton( backgroundColor: Colors.indigo, child: const Icon(Icons.add), onPressed: () => null, ),
Na propriedade floatingActionButtonLocation informamos que nossa FAB será do tipo FloatingActionButtonLocation.centerDocked e depois criamos normalmente sem nenhum mistério.
Agora, por último, nosso BottomAppBar, um dos Widgets que mais gosto no Flutter:
bottomNavigationBar: BottomAppBar( color: Colors.indigo, shape: CircularNotchedRectangle(), notchMargin: 4.0, child: new Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ IconButton( icon: Icon( Icons.chat, color: Colors.white, ), onPressed: () => null, ), Padding( padding: const EdgeInsets.only(right: 10), child: CircleAvatar( radius: 15.0, backgroundImage: NetworkImage("https://media-exp1.licdn.com/dms/image/C4D03AQH-X7AenooDvw/profile-displayphoto-shrink_100_100/0?e=1604534400&v=beta&t=3uu41paJLzrSdYcb5bPYdTXtdPj4KUg5z-hRoc1cwxI"), backgroundColor: Colors.transparent, ), ), ], ), ),
Na propriedade shape passamos que será do tipo CircularNotchedRectangle, nosso notchMargin terá uma margem de 4.0 e depois apenas uma linha(Row) com um botão do lado esquerdo, e nosso avatar do lado direito.
Se você conseguiu seguir os passos, você terá uma tela como essa:
Caso você tenha alguma dúvida ou não consiga reproduzir o aplicativo, deixe um comentário 🙂
Abraços e até a próxima!
Hey there. I discovered your blog by the use of Google whilst searching for a similar topic, your web site got here up. It appears to be good. I have bookmarked it in my google bookmarks to visit then. Sara Andre Skiest
For hottest information you have to pay a quick visit the web and on internet I found this web site as a best web page for most recent updates. Josepha Trent Kawai
My brother recommended I might like this blog. He was entirely right. This post truly made my day. You can not imagine just how much time I had spent for this information! Thanks! Dottie Land Sheeree
It’s very interesting link! Share it more please with you friends. Thank you!
https://drochka.org/categories
Bravo, brilliant idea
thanks, very interesting 🙂