Search code examples
flutter-web

Flutter WEB How to create text scroll(horizontal) for text-overflow?


I am creating a card. The card has 2 line text widget. This text is overflow. I tried to use SingleChildScrollView with Axis. vertical. It's worked for mobile and web. But horizontal does not work for the web. (I need to use horizontally)

This code below works for mobile apps but does not work for the web.

Code:

Container(
    width: 100,
    height: 50,
    child: Column(
      children: [
        Expanded(
          flex: 1,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Text(
              "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Text(
                "BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
            ),
          ),
        ),
      ],
    ),
  )

Solution

  • Just use your widgets in a Row and using a SingleChildScrollView with scrollDirection: Axis.horizontal.

    SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [Text("...")]))