flutter: есть ли способ повторно использовать виджет?

Question

У меня есть два практически одинаковых виджета, за исключением цвета. Они представляют собой плитку списка в построителе представления списка. Есть проверка, отображаемая серым или красным цветом. Единственное свойство, которое нужно изменить, - это цвет. Я знаю, что есть функция copyWith (), но, похоже, ее нельзя использовать в данном случае. Как я могу повторно использовать виджет ниже?

Widget listTile = Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
        color: Colors.grey[300],  
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
        child: ListTile(
          title: Text(
              message.title),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(message.name),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.alarm_on,
                    color: Colors.redAccent,
                    size: 16,
                  ),
                  Text(message.time),
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );

Answer 1

Создайте функцию, которая принимает color в качестве параметра ... и возвращает ваш виджет из этой функции ..

Что-то вроде этого ..

customWidget( Color color){
return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
        color: Colors.grey[300],  
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
        child: ListTile(
          title: Text(
              message.title),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(message.name),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.alarm_on,
                    //color: Colors.redAccent,
                    color: color,
                    size: 16,
                  ),
                  Text(message.time),
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );
}

И когда захотите использовать ... сделайте это так ..

customWidget(Colors.red)

Надеюсь, это решит вашу проблему ... не стесняйтесь спрашивать разъяснений :)

Answer 2

Вместо того, чтобы делать его переменной, вы можете сделать его методом, а затем передать ему параметр цвета.

Widget buildWidget(Color color) {
 return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
        color: color,  // Use your color parameter here
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
        child: ListTile(
          title: Text(
              message.title),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(message.name),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.alarm_on,
                    color: Colors.redAccent,
                    size: 16,
                  ),
                  Text(message.time),
                ],
              )
            ],
          ),
        ),
      ),
    ),
  );
}

Вы также можете передать объект сообщения, который используете в качестве параметр функции

Итак, ваш ListView.builder будет выглядеть так:

ListView.builder(
   ..., // other properties
   itemBuilder: (context, index) => buildWidget(/*Your params here*/),
),