Widgets de chip no Flutter
Os widgets do Flutter são criados usando uma estrutura moderna inspirada no React. Aprendemos antes que tudo no Flutter é um widget. Em qualquer ponto que você codificar para criar qualquer coisa no Flutter, estará dentro de um widget. A intenção central é construir o aplicativo a partir de widgets.
Ele retrata como a visualização de seu aplicativo deve parecer com seu design e estado atuais. Quando você ajustou o código, o widget recriou sua representação calculando a distinção entre o widget anterior e o atual para decidir as alterações insignificantes a serem entregues na interface do usuário do aplicativo.
Neste artigo, vamos explorar os Chip Widgets In Flutter. Também implementaremos um programa de demonstração, descreveremos propriedades e seus tipos e como usá-los em seus aplicativos flutter.
Conteudo
Widget Chips
Chips são componentes conservadores que falam sobre qualidade, texto, entidade ou ação. Fornecer um callback onDeleted não inválido fará com que o chip incorpore um botão para apagar o chip. Seus progenitores devem incorporar Material, MediaQuery, Directionality e MaterialLocalizations. Regularmente, esses widgets são fornecidos por MaterialApp e Scaffold. As contenções label e clipBehavior não devem ser inválidas.
Ele fala com elementos complexos em pequenos blocos, por exemplo, um contato. Os chips de contato podem falar minimamente com os dados de contato. Os chips podem ser utilizados para diferentes tipos de elementos, incluindo texto de forma livre, texto predefinido, regras ou contatos. Os chips também podem conter ícones.
Primeiro, criaremos um widget de chip básico no flutter
Widget _buildChip(String label, Color color) {
return Chip(
labelPadding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.white70,
child: Text(label[0].toUpperCase()),
),
label: Text(
label,
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: color,
elevation: 6.0,
shadowColor: Colors.grey[60],
padding: EdgeInsets.all(8.0),
);
}
}Vamos criar um widget _buildChip(), nesse widget vamos retornar um Chip, e nesse método vamos usar um avatar e uma propriedade label.
chipList() {
return Wrap(
spacing: 6.0,
runSpacing: 6.0,
children: <Widget>[
_buildChip('Gamer', Color(0xFFff6666)),
_buildChip('Hacker', Color(0xFF007f5c)),
_buildChip('Developer', Color(0xFF5f65d3)),
_buildChip('Racer', Color(0xFF19ca21)),
_buildChip('Traveller', Color(0xFF60230b)),
],
);
}Vamos criar o método chipList() e chamar o widget _buildChip() neste método e envolvê-lo. Agora, execute o código e obtenha a saída final em seus dispositivos.
Propriedades
Vejamos algumas de suas propriedades:
> label: Esta propriedade é obrigatória; reconhece qualquer widget simultaneamente; principalmente, é uma ótima ideia ter um widget de Texto representando o nome de qualquer entidade, ação e assim por diante.
> avatar: Esta propriedade foi, Ele reconhece qualquer widget e pode ser utilizado para mostrar imagens, as letras subjacentes de qualquer entidade, ação e assim por diante
> backgroundColor: Esta propriedade indica a cor de fundo do chip quando ele está desmarcado e habilitado.
> labelStyle: Esta propriedade foi utilizada para aplicar qualquer TextStyle ao rótulo.
> labelPadding: Esta propriedade foi adicionada algum preenchimento ao redor do rótulo.
> elevation: Esta propriedade foi reconhecida como valor duplo e utilizada para elevar o chip.
> shadowColor: Esta propriedade foi colorida para a sombra do chip quando a elevação é definida.
> deleteIcon: Esta propriedade foi utilizada para mostrar o ícone de exclusão. Isso ficará óbvio quando onDeleted estiver definido.
> onDeleted: Esta propriedade era um retorno de chamada quando o ícone de exclusão é espremido dentro do chip.
> deleteIconColor: Esta propriedade era a cor a ser definida para o ícone de exclusão.
> deleteButtonTooltipMessage: Esta propriedade foi definida como uma mensagem para aparecer na dica de ferramenta do ícone de exclusão.
> shape: Esta propriedade pode ser utilizada para oferecer formas à borda do chip.
Características
- A propriedade Value do widget Chips pode ser vinculada a um conjunto de dados de qualidades legítimas, por exemplo, endereços de e-mail, passatempos, conjunto de habilidades, categorias e o céu é o limite a partir daí. Você pode adicionar novos valores, mas esses novos valores não serão adicionados ao conjunto de dados.
- Funciona como um widget de pesquisa/completar automaticamente. Quando você começa a compor no widget Fichas, ele aciona a escolha de valores do conjunto de dados e compara os valores do personagem.
- Permit Only Select (Padrão: falso) — Se Allow Only Select for definido como válido, Chips limitará a adição de valores diferentes da escolha. Por padrão, não há limitação. De qualquer forma, observe que esses novos valores não serão adicionados ao conjunto de dados.
- Max Size (Padrão: 0) — Por padrão, não há restrição quanto ao número de fichas a serem adicionadas. Se for definido como válido após Max Size chegar na caixa de entrada para adicionar mais, ele será encoberto e indicado novamente após uma parte dos componentes ser apagada.
- A propriedade de nome de classe de item de chip na guia estilos pode ser utilizada para aplicar estilos para itens únicos do chip.
Os nomes das classes podem ser inseridos (sem condição), essas classes serão aplicadas a todos os chips. - Funcionalidade de tempo de execução: você pode explorar as coisas entre os chips utilizando as teclas bidirecionais do console. Da mesma forma, usando as teclas apagar/excluir, o item Chip pode ser excluído.
Types
1. Action Chips
Os chips de ação podem ser utilizados para convocar alguma atividade na substância primária. Ele não pode ser desabilitado porque não é obrigatório, então nem deveria estar acessível aos usuários.
ActionChip(
elevation: 8.0,
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.redAccent,
child: Icon(Icons.mode_comment,color:
Colors.white,size: 20,),
),
label: Text('Message'),
onPressed: () {
_key.currentState.showSnackBar(SnackBar(
content: Text('Message...'),
));
},
backgroundColor: Colors.grey[200],
shape: StadiumBorder(
side: BorderSide(
width: 1,
color: Colors.redAccent,
)),
);Neste chip, usaremos avatar, label, shape e onPressed(). No método onPressed, adicionaremos uma snackbar para exibição do texto. Agora, execute o código e mostre a saída abaixo do vídeo.
2. Input Chips
Os chips de entrada falam com um fragmento de informação incompreensível, por exemplo, uma substância (indivíduo, ponto ou coisa) ou conteúdo de conversação, em uma estrutura mínima.
Os chips de entrada podem se tornar selecionáveis definindo onSelected, deletáveis definindo onDeleted e pressionáveis como um botão com onPressed. Eles têm um label e podem ter o símbolo inicial (consulte avatar) e um símbolo final (deleteIcon). Cores e preenchimento podem ser ajustados.
InputChip(
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.pink.shade600,
child: Text('FD'),
),
label: Text('Flutter Devs',style: TextStyle(color:
_isSelected?Colors.white:Colors.black),
),
selected: _isSelected,
selectedColor: Colors.blue.shade600,
onSelected: (bool selected) {
setState(() {
_isSelected = selected;
});
},
onDeleted: () {
},
);
3. Filter Chips
O chip Filter contém alternativas, atributos, categorias com o objetivo de que os usuários possam filtrá-lo. Você pode, sem dúvida, substituir a caixa de seleção por um chip de filtro. Os chips de filtro consideram alternativas claramente delineadas e descobertas em uma zona conservadora.
FilterChip(
backgroundColor: Colors.tealAccent[200],
avatar: CircleAvatar(
backgroundColor: Colors.cyan,
child: Text(company.name[0].toUpperCase(),style: TextStyle(color: Colors.white),),
),
label: Text(company.name,),
selected: _filters.contains(company.name),
selectedColor: Colors.purpleAccent,
onSelected: (bool selected) {
setState(() {
if (selected) {
_filters.add(company.name);
} else {
_filters.removeWhere((String name) {
return name == company.name;
});
}
});
},
),Neste chip, selecionaremos e desmarcaremos aleatoriamente com suas múltiplas escolhas. O vídeo abaixo mostra como os chips de filtro funcionarão.
4. Choice Chips
O chip de escolha permite escolher um único chip do resumo. Ele pode substituir diferentes widgets que permitem uma única determinação, como o botão de troca e o botão de opção.
ChoiceChip(
label: Text(_choices[index]),
selected: _choiceIndex == index,
selectedColor: Colors.red,
onSelected: (bool selected) {
setState(() {
_choiceIndex = selected ? index : 0;
});
},
backgroundColor: Colors.green,
labelStyle: TextStyle(color: Colors.white),
);Os chips de escolha contêm texto ou categorias descritivas relacionadas. Este chip permite apenas a seleção de um único chip. O vídeo abaixo mostra como funcionará o Choice Chips.
Código Fonte
import 'package:flutter/material.dart';
class ChipDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _ChipDemoState();
}
class _ChipDemoState extends State<ChipDemo> {
GlobalKey<ScaffoldState> _key;
bool _isSelected;
List<CompanyWidget> _companies;
List<String> _filters;
List<String> _choices;
int _choiceIndex;
@override
void initState() {
super.initState();
_key = GlobalKey<ScaffoldState>();
_isSelected = false;
_choiceIndex = 0;
_filters = <String>[];
_companies = <CompanyWidget>[
CompanyWidget('CEO'),
CompanyWidget('Director'),
CompanyWidget('Manager'),
CompanyWidget('Team Leader'),
CompanyWidget('Employee'),
CompanyWidget('CapSistema'),
];
_choices = ["Software Engineer", "Software Developer", "Software Testing", "CapSistem Projects"];
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
appBar: AppBar(
title: Text("Chip Widget In Flutter"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
chipList(),
_buildActionChips(),
_buildInputChips(),
Wrap(
children: companyPosition.toList(),
),
_buildChoiceChips(),
],
),
),
);
}
chipList() {
return Wrap(
spacing: 6.0,
runSpacing: 6.0,
children: <Widget>[
_buildChip('Gamer', Color(0xFFff6666)),
_buildChip('Hacker', Color(0xFF007f5c)),
_buildChip('Developer', Color(0xFF5f65d3)),
_buildChip('Racer', Color(0xFF19ca21)),
_buildChip('Traveller', Color(0xFF60230b)),
],
);
}
Widget _buildChoiceChips() {
return Container(
height: MediaQuery.of(context).size.height / 4,
child: ListView.builder(
itemCount: _choices.length,
itemBuilder: (BuildContext context, int index) {
return ChoiceChip(
label: Text(_choices[index]),
selected: _choiceIndex == index,
selectedColor: Colors.red,
onSelected: (bool selected) {
setState(() {
_choiceIndex = selected ? index : 0;
});
},
backgroundColor: Colors.green,
labelStyle: TextStyle(color: Colors.white),
);
},
),
);
}
Widget _buildInputChips() {
return InputChip(
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.pink.shade600,
child: Text('FD'),
),
label: Text(
'Flutter Devs',
style: TextStyle(color: _isSelected ? Colors.white : Colors.black),
),
selected: _isSelected,
selectedColor: Colors.blue.shade600,
onSelected: (bool selected) {
setState(() {
_isSelected = selected;
});
},
onDeleted: () {},
);
}
Widget _buildActionChips() {
return ActionChip(
elevation: 8.0,
padding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.redAccent,
child: Icon(
Icons.mode_comment,
color: Colors.white,
size: 20,
),
),
label: Text('Message'),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("Message..."),
duration: Duration(milliseconds: 300),
),
);
},
backgroundColor: Colors.grey[200],
shape: StadiumBorder(
side: BorderSide(
width: 1,
color: Colors.redAccent,
)),
);
}
Iterable<Widget> get companyPosition sync* {
for (CompanyWidget company in _companies) {
yield Padding(
padding: const EdgeInsets.all(6.0),
child: FilterChip(
backgroundColor: Colors.tealAccent[200],
avatar: CircleAvatar(
backgroundColor: Colors.cyan,
child: Text(
company.name[0].toUpperCase(),
style: TextStyle(color: Colors.white),
),
),
label: Text(
company.name,
),
selected: _filters.contains(company.name),
selectedColor: Colors.purpleAccent,
onSelected: (bool selected) {
setState(() {
if (selected) {
_filters.add(company.name);
} else {
_filters.removeWhere((String name) {
return name == company.name;
});
}
});
},
),
);
}
}
Widget _buildChip(String label, Color color) {
return Chip(
labelPadding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.white70,
child: Text(label[0].toUpperCase()),
),
label: Text(
label,
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: color,
elevation: 6.0,
shadowColor: Colors.grey[60],
padding: EdgeInsets.all(8.0),
);
}
}
class CompanyWidget {
const CompanyWidget(this.name);
final String name;
}
Conclusão:
No artigo, expliquei algumas propriedades e tipos de Chip Widgets; você pode modificar este código de acordo com sua escolha. Esta foi uma pequena introdução ao Chip Widgets On User Interaction da minha parte, e está funcionando usando o Flutter.
Espero que este blog forneça a você informações suficientes sobre como testar widgets de chip em seus projetos de Flutter. Mostraremos os chips, algumas propriedades usadas nos chips e faremos um programa de demonstração para o funcionamento do chip em seus aplicativos de flutter. Então, por favor, tente.
