Tornike
Tornike

Reputation: 1

flutter scrollable selectable text

I have a reading application, where I show massive bodies of text. For performance issues I'm splitting up this text in chunks and displaying in a ListView.builder() widget

The problem arises when I want to make the text selectable with SelectableText widget. Because text is split between list items, I can't select between them. Basically text is only selectable in a list item.

Solution would be to display text without performance issues along with the ability to select between chunks or whole text

Upvotes: 0

Views: 1056

Answers (1)

Awais Rehman
Awais Rehman

Reputation: 674

You need to wrap your SingleChildScrollView in an Expanded widget and you will get what you are looking for.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
    return new MaterialApp(
  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
    ),
      home: new MyHomePage(),
    );
   }
  }

 class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery
    .of(context)
    .size;
  final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
  final double itemWidth = size.width;

return new Container(
  child: new Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      new Padding(
        padding: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
        child: new Image.asset(
          'assets/rp1.jpg',
          height: 200.0,
          width: itemWidth,
        ),
      ),
      new Padding(
        padding: const EdgeInsets.all(12.0),
        child: new Text(
          "Some Heading Text",
          style: new TextStyle(
              fontSize: 28.0,
              color: Colors.white,
              fontWeight: FontWeight.w600),
        ),
      ),
      new Expanded(
        flex: 1,
        child: new SingleChildScrollView(
          scrollDirection: Axis.vertical,//.horizontal
          child: new Text(
            "1 Description that is too long in text format(Here Data is coming from API) jdlksaf j klkjjflkdsjfkddfdfsdfds " + 
            "2 Description that is too long in text format(Here Data is coming from API) d fsdfdsfsdfd dfdsfdsf sdfdsfsd d " + 
            "3 Description that is too long in text format(Here Data is coming from API)  adfsfdsfdfsdfdsf   dsf dfd fds fs" + 
            "4 Description that is too long in text format(Here Data is coming from API) dsaf dsafdfdfsd dfdsfsda fdas dsad" + 
            "5 Description that is too long in text format(Here Data is coming from API) dsfdsfd fdsfds fds fdsf dsfds fds " + 
            "6 Description that is too long in text format(Here Data is coming from API) asdfsdfdsf fsdf sdfsdfdsf sd dfdsf" + 
            "7 Description that is too long in text format(Here Data is coming from API) df dsfdsfdsfdsfds df dsfds fds fsd" + 
            "8 Description that is too long in text format(Here Data is coming from API)" + 
            "9 Description that is too long in text format(Here Data is coming from API)" + 
            "10 Description that is too long in text format(Here Data is coming from API)",     
            style: new TextStyle(
              fontSize: 16.0, color: Colors.white,
            ),
          ),
        ),
      ),
    ],
    ),
  );
 }
 }

Upvotes: 1

Related Questions