Самый простой способ динамически создавать иконки во флаттере.

При использовании флаттера нам иногда нужно создать множество значков с похожими свойствами. Хотя есть много способов сделать это, но мы всегда хотим использовать передовой опыт и более эффективный способ кодирования. Посмотрим, как мы сможем это сделать.

Один из самых простых способов - использовать виджет «Иконки» и нарисовать иконку в нашем приложении. Вот фрагмент кода, показывающий, как это можно сделать обычным способом: -

return Container(
  child: Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   childern: <Widget>[
      Icon(
      Icons.add,
      size: 50.0,
      color: Colors.green,
      ),
      Icon(
      Icons.search,
      size: 50.0,
      color: Colors.blue,
      ),
      Icon(
      Icons.close,
      size: 50.0,
      color: Colors.red,
      ),
    ],
  ),
)

Этот метод вполне подходит, если вы хотите добавить в свое приложение некоторое фиксированное количество значков меньшего размера. Но что, если мы хотим иметь более 5 иконок в разных контейнерах? А что, если вы хотите изменить одно свойство этих значков, например цвет или размер? Что ж, есть много способов сделать это. Один из способов, который я нашел очень полезным и простым, - это использовать списки, функции и карту.

Используя эту технику, мы можем просто добавить несколько значков за один раз, просто определив функцию для создания значков.

Чтобы упростить понимание, сначала мы создаем список «IconData», в котором указываются значки, которые мы хотим создать. Затем мы создаем функцию и пишем некоторые свойства, которые хотим применить к иконкам. И после этого мы создаем список в виде карты, чтобы мы могли неявно перебирать список. Давайте сначала посмотрим на код списка.

List<IconData> _icons = [ 
// The underscore declares a variable as private in dart.
Icons.add,
Icons.search,
Icons.close,
];

Итак, мы закончили с созданием нашего списка, мы можем добавить столько значков, сколько захотим, но для простоты этого примера я показываю здесь только три. Следующим шагом будет создание функции, которая будет строить наши значки.

Widget _buildIcon(int index){
  return Container(
    height: 40.0
    width: 40.0
    child:
      _icons[index],
      size: 50.0,
    )
}

Мы собираемся передать индекс иконок из списка в функцию. На следующем шаге в строке или столбце мы преобразуем список в карту. Цель использования map - использовать итерацию по элементам списка. Посмотрим код

return Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: _icons.asMap().entries.map(
      (MapEntry map) => _buildIcon(map.key
    ),
  ).toList(),
),

Здесь Entries () предоставляет нам итератор, по которому мы можем выполнять итерацию, а map () принимает анонимную функцию, в которой мы передаем MapEntry в качестве параметра, который ссылается на одну запись, и эта функция вызывает наш _buildIcon () с 'ключом' параметр карты, который передается в анонимную функцию. И, наконец, мы снова преобразуем эту карту в список виджетов, которые наша Row () примет в качестве своих дочерних элементов. Это вернет строку, содержащую значки, которые есть в нашем списке.

Вам может показаться, что это больше кода по сравнению с предыдущим, но это динамический способ, который избавляет нас от «жесткого кодирования», когда у нас есть несколько строк с разными значками. В этом случае нам просто нужно создать еще один список IconData и передать его в функцию, и будет готова еще одна строка значков. Вы также можете применить эту технику везде, где захотите. Надеюсь, вы нашли эту статью полезной.

thisArticle == «Нашли полезным»? hitClaps () && saveArticle (): commentBelow ();