Chrystoffer Kugler Horochovec

Package shared_preferences

08/06/2022 0 Packages

Olá pessoal. Hoje vou comentar sobre um pacote que eu costumo utilizar bastante, que é o shared_preferences.
Várias vezes eu preciso gravar algumas informações nos meus aplicativos, e nem sempre eu vejo necessidade de criar um banco offline para isso. Muitas vezes são poucas informações… tais como se o usuário já configurou o aplicativo, escolheu alguma opção entre outras. Coisas simples mesmo. E nesse cenário que eu costumo usar o shared preferences, pois com ele eu posso gravar essas informações de forma simples e rápida, e na próxima vez que o usuário abrir o aplicativo, eu terei o retorno dessas informações… como eu disse, sem a necessidade de utilizar o sqflite.

Para utilizar esse pacote, primeiro temos que instalar ele no nosso pubspec.yaml adicionando dentro de dependencies

dependencies:
  shared_preferences: ^2.0.15

E depois executar o comando no terminal para realizar o download do pacote

flutter pub get

Executado o comando, podemos importar e começar a utilizar o pacote em nosso projeto.

import 'package:shared_preferences/shared_preferences.dart';

Precisamos agora, instanciar nosso pacote em um método assíncrona.

SharedPreferences _prefs = await SharedPreferences.getInstance();

Pronto, a partir de agora podemos começar gravar e ler nossas informações sem a necessidade de um banco de dados sqlite.
Para utilizar é muito simples. Temos o Set e o Get para cada tipo de informação.

_prefs.remove('key'); - Remove a chave
_prefs.setBool('key', true/false); - Grava um valor booleano na chave. Caso esse valor seja null equivale chamar um remove().
_prefs.getBool('keyBool'); - Lê um valor da chave booleano
_prefs.setDouble('keyDouble', 3.5); - Grava um valor double na chave.
_prefs.getDouble('keyDouble'); - Lê um valor da chave double.
_prefs.setInt('keyInt', 7); - Grava um valor int na chave.
_prefs.getInt('keyInt'); - Lê um valor da chave int.
_prefs.setString('keyString', 'Chrystoffer Kugler Horochovec'); - Grava um valor String na chave.
_prefs.getString('keyString'); - Lê um valor da chave String.
_prefs.setStringList('keyStringList', ['a', 'b', 'c', 'd']); - Grava um valor de lista de String na chave.
_prefs.getStringList('keyStringList'); - Lê um valor da chave de Lista de String.

Vale lembrar, que o pacote possui selo de Flutter Favorite!
Ficou curioso? Acesse o link do pacote direto em pub.dev/shared_preferences

Chat UI

24/09/2020 6 Uncategorized

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:
Screenshot-20200923-234309

Caso você tenha alguma dúvida ou não consiga reproduzir o aplicativo, deixe um comentário 🙂

Abraços e até a próxima!

Appbar Wave

06/09/2020 0 Uncategorized

Nesse meu primeiro post, vou demonstrar como podemos desenvolver uma AppBar utilizando os pacotes wave e jumping_bottom_nav_bar.
Essa ideia surgiu de um post no Facebook e resolvi tentar fazer algo parecido. Gostei do resultado final e acho que poderia ser utilizado em algum aplicativo.

Um vídeo demonstrando o resultado final

E o fonte você pode verificar direto github