Customisation of SmartSelect tile

[WieFel]

Hi, Thanks for the literally awesome package! Unfortunately, I still have some problems with it. I am using two expanded SmartSelect widgets within a row and I am having problems with the responsiveness/customisability of the tiles. As can be seen, the title text of the left smart select is already wrapped into 2 lines but doesn't look very good:

Also, if I have a multi selection and multiple items are selected, the title looks like this:

If too many options are selected, the text overflows:

Actually I would need two things:

1. Be able to hide the title completely. (currently, when setting title: "" I get an exception)
2. Be able to define text behaviour of title and selected item text: maxLines and overflow properties just like in Flutter's Text widget.

[akbarpulatov]

Hi, and sorry for the late reply. Thank you for your kind words)) Probably, we will be adding this in next sunday's release).

[WieFel]

@akbarpulatov thank you very much for the response!

As a small workaround I am currently just manually displaying the current value inside the title, and disabled the SmartSelect-provided showing of the current value instead.

[akbarpulatov]

Hi! Can you share your code? By the way, you should not have an exception when title: "".

[akbarpulatov]

I created a discord channel for this purpose: https://discord.gg/2HAKeZwPsQ

[akbarpulatov]

Maybe you want to use custom tile and set your own Text Widget with your properties like this:

import 'package:flutter/material.dart';
import 'package:flutter_awesome_select/flutter_awesome_select.dart';

class FeaturesMultiPage extends StatefulWidget {
  @override
  _FeaturesMultiPageState createState() => _FeaturesMultiPageState();
}

class _FeaturesMultiPageState extends State<FeaturesMultiPage> {

  List<String>? _chosenSeries = ['a'];

  List<S2Choice<String>> _series = [
    S2Choice<String>(value: 'a', title: 'a'),
    S2Choice<String>(value: 'b', title: 'b'),
    S2Choice<String>(value: 'c', title: 'c'),
    S2Choice<String>(value: 'd', title: 'd'),
    S2Choice<String>(value: 'e', title: 'e'),
  ];

  List<String>? _chosenPeriod = ['live'];

  List<S2Choice<String>> _periods = [
    S2Choice<String>(value: 'live', title: 'Live'),
    S2Choice<String>(value: 'another_pediod_1', title: 'Another Period 1'),
    S2Choice<String>(value: 'another_pediod_2', title: 'Another Period 2'),
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Flexible(
          flex: 5,
          child: SmartSelect<String>.multiple(
            title: 'Period title',
            selectedValue: _chosenPeriod,
            choiceItems: _periods,
            tileBuilder: (context, state){
              return S2Tile.fromState(state,
                title: Text('Period', overflow: TextOverflow.ellipsis, maxLines: 1,),
              );
            },
            onChange: (selected) => setState(() => _chosenPeriod = selected?.value),
          ),
        ),
        const Divider(indent: 20),
        Flexible(
          flex: 5,
          child: SmartSelect<String>.multiple(
            title: 'Series title',
            selectedValue: _chosenSeries,
            tileBuilder: (context, state){
              return S2Tile.fromState(state,
                title: Text('Series', overflow: TextOverflow.ellipsis, maxLines: 1,),
              );
            },
            choiceItems: _series,
            onChange: (selected) => setState(() => _chosenSeries = selected?.value),
          ),
        ),
      ],
    );
  }
}

P.S. I recommend using SmartSelect in a column layout. But, if you want to make a row of multiple SmartSelect widgets, then you'd rather use tile and value to be in a column ( set isTwoLine: true,). Result:

Hope this helps! Wait for your reply.

[akbarpulatov]

Hi, and sorry for the late reply. Thank you for your kind words)) Probably, we will be adding this in next sunday's release).

Actually this approach was not effective)) So you can share your ideas if you have

[WieFel]

P.S. I recommend using SmartSelect in a column layout. But, if you want to make a row of multiple SmartSelect widgets, then you'd rather use tile and value to be in a column ( set isTwoLine: true,). Result:

Hope this helps! Wait for your reply.

@akbarpulatov Actually this helped, thank you! For now, I am good!