Как добавить градиент в заголовок ExpansionTile во флаттере

Question

Я пытаюсь добиться определенного вида в моей ExpansionTile, 1. Когда свернут solid цвет заголовка 2. Когда расширенный градиент в заголовке только не в теле с элементами.

Это то, что я пытаюсь достичь :

Я пытаюсь с этим кодом:

            Theme(
              data: ThemeData(
                //brightness: Brightness.dark,
                primaryColor: Colors.black87,
                accentColor: Colors.black87,
                dividerColor: Colors.transparent,
              ),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(
                        width: 1, color: Color.fromRGBO(121, 85, 72, 1)),
                    gradient: LinearGradient(
                        begin: FractionalOffset.bottomCenter,
                        end: FractionalOffset.topCenter,
                       // stops: [0.1, 1.0],
                       // tileMode: TileMode.clamp,


                        colors: [
                          isExpanded
                              ? Color.fromRGBO(255,255,255,100)
                              : Color.fromRGBO(197, 181, 176, 1),
                          Color.fromRGBO(197, 181, 176, 1)//closed solid
                        ])),
                // color: Colors.brown,
                child: ExpansionTile(
              //backgroundColor: Colors.amberAccent,
                  trailing: isExpanded //assets/collapse_arrow.png
                      ? Image.asset('assets/collapse_arrow.png')
                      : Image.asset('assets/expand_arrow.png'),
                  onExpansionChanged: (bool expanding) =>
                      setState(() => isExpanded = expanding),
                  title: Text(
                    'Header',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                  children: <Widget>[

                    _dropDownItem('Rank', _selectRankFamily2,
                        _rankFamily2, 'Select Rank'),
                    _dropDownItem('Rank', _selectRankFamily2,
                        _rankFamily2, 'Select Rank'),
                    _dropDownItem('Rank', _selectRankFamily2,
                        _rankFamily2, 'Select Rank')
                  ],
                ),
              ),
            ),

но я получаю такой результат:

То есть градиент - это не только заголовок, есть ли способ сделать градиент или solid цвет только для части заголовка и только при расширении? Спасибо /

* Редактировать Если я использую sugested answere, чтобы обернуть только TITLE, я получил такой результат:

Так что мне нужно Завернуть концевую иконку тоже как-то или как? Или, может быть, сделать "поддельную" расширяемую коробку сверху ...

Answer 1

Я нашел это,

Если вы проверите исходный код ExpansionTitle, вы заметите, что элемент заголовка является ListTile, поэтому вы не можете изменить фон, потому что он не имеет родитель со свойством цвета. Я немного изменил класс для поддержки того, что вам нужно.

Добавьте этот файл в ваш проект: https://gist.github.com/diegoveloper/02424eebd4d6e06ae649b31e4ebcf53c <</p>

Теперь есть симуляция перегрузить градиентное свойство цвета solid? 1012 *

Answer 2

Вы оборачиваете всю плитку расширения контейнером, вместо этого вы должны обернуть только виджет заголовка, это может быть то, что вы ищете

Theme(
      data: ThemeData(
        //brightness: Brightness.dark,
        primaryColor: Colors.black87,
        accentColor: Colors.black87,
        dividerColor: Colors.transparent,
      ),
      child: ExpansionTile(
        //backgroundColor: Colors.amberAccent,
        trailing: isExpanded //assets/collapse_arrow.png
            ? Image.asset('assets/collapse_arrow.png')
            : Image.asset('assets/expand_arrow.png'),
        onExpansionChanged: (bool expanding) =>
            setState(() => isExpanded = expanding),
        title: Container(
          decoration: BoxDecoration(
              border:
                  Border.all(width: 1, color: Color.fromRGBO(121, 85, 72, 1)),
              gradient: LinearGradient(
                  begin: FractionalOffset.bottomCenter,
                  end: FractionalOffset.topCenter,
                  // stops: [0.1, 1.0],
                  // tileMode: TileMode.clamp,

                  colors: [
                    isExpanded
                        ? Color.fromRGBO(255, 255, 255, 100)
                        : Color.fromRGBO(197, 181, 176, 1),
                    Color.fromRGBO(197, 181, 176, 1) //closed solid
                  ])),
          child: Text(
            'Header',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
        ),
        children: <Widget>[
          _dropDownItem(
              'Rank', _selectRankFamily2, _rankFamily2, 'Select Rank'),
          _dropDownItem(
              'Rank', _selectRankFamily2, _rankFamily2, 'Select Rank'),
          _dropDownItem('Rank', _selectRankFamily2, _rankFamily2, 'Select Rank')
        ],
      ),
    ),