Есть ли способ экспорта ряда кнопок в виде виджета?

Question

У меня есть эта строка на двух страницах, я хотел бы извлечь ее как виджет, чтобы избежать повторения, но моя среда IDE не позволяет мне отображать всплывающее сообщение:

Ссылка на метод окружающего класса не может быть извлечен

Ниже моя строка, я попытался заключить ее в контейнер, но результат тот же.

  child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  TagButton(
                    isActive: _selectedTag == 'cart',
                    tagIcon: Icons.local_grocery_store,
                    onTap: () {
                      setState(() {
                        _selectedTag = 'cart';
                      });
                    },
                  ),
                  TagButton(
                    isActive: _selectedTag == 'school',
                    tagIcon: Icons.school,
                    onTap: () {
                      setState(() {
                        selectedTag = 'school';
                      });
                    },
                  ),
                  TagButton(
                    isActive: _selectedTag == 'all',
                    tagIcon: Icons.block,
                    onTap: () {
                      setState(() {
                        _selectedTag = 'all';
                      });
                    },
                  ),
                  TagButton(
                    isActive: _selectedTag == 'relax',
                    tagIcon: Icons.spa,
                    onTap: () {
                      setState(() {
                        _selectedTag = 'relax';
                      });
                    },
                  ),
                  TagButton(
                    isActive: _selectedTag == 'recipes',
                    tagIcon: Icons.restaurant,
                    onTap: () {
                      setState(() {
                        _selectedTag = 'recipes';
                      });
                    },
                  ),
                ],
              ),

Я пытался извлечь его как метод, но как только я переместил его в другой файл дротика (чтобы я мог импортировать его на две страницы и использовать его там), появляется много предупреждений

lib/widgets/tagsBar.dart:17:13: Error: Method not found: 'setState'.
  setState(() {
  ^^^^^^^^
lib/widgets/tagsBar.dart:23:21: Error: Getter not found: 'selectedTag'.
  isActive: selectedTag == 'school',
  ^^^^^^^^^^^

Answer 1

Лучший способ сделать это - реализовать как отдельный класс widget

import 'package:flutter/material.dart';

class SharedWidgetRow extends StatefulWidget {
  final stateRebuild;

  SharedWidgetRow({@required this.stateRebuild});
  @override
  _SharedWidgetRowState createState() => _SharedWidgetRowState();
}

class _SharedWidgetRowState extends State<SharedWidgetRow> {
  var  _selectedTag = 'cart';
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        TagButton(
          isActive: _selectedTag == 'cart',
          tagIcon: Icons.local_grocery_store,
          onTap: () {
            _selectedTag = 'cart';
            widget.stateRebuild();
          },
        ),
        TagButton(
          isActive: _selectedTag == 'school',
          tagIcon: Icons.school,
          onTap: () {
            selectedTag = 'school';
            widget.stateRebuild();
          },
        ),
        TagButton(
          isActive: _selectedTag == 'all',
          tagIcon: Icons.block,
          onTap: () {
            _selectedTag = 'all';
            widget.stateRebuild();
          },
        ),
        TagButton(
          isActive: _selectedTag == 'relax',
          tagIcon: Icons.spa,
          onTap: () {
            _selectedTag = 'relax';
            widget.stateRebuild();
          },
        ),
        TagButton(
          isActive: _selectedTag == 'recipes',
          tagIcon: Icons.restaurant,
          onTap: () {
            _selectedTag = 'recipes';
            widget.stateRebuild();
          },
        ),
      ],
    );
  }
}

И setState() должен быть в одном контексте, поэтому вы должны передать его в качестве параметра при вызове этого виджета

SharedWidgetRow(stateRebuild: setState((){})),

вам следует рассмотреть возможность сделать эту переменную _selectedTag глобальной, если она будет использоваться где-то еще