Flutter SelectableText

Flutter SelectableText

You must be very familiar with text selection in web pages where you use mouse to select text in a page. Similarly you can make user to select some of the text displayed in your application using SelectableText widget.

When you display the text using SelectableText widget, user can select the part of it.

Following is the quick code snippet of SelectableText widget. You can set style and alignment for the text.

Sample Code Snippet

The first argument to SelectableText is the text you would like to display with the capability to be selected by the user.

SelectableText(
  'Hello! Welcome to Flutter Tutorial by googleflutter.com',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)

Example: SelectableText

In this example, we shall use SelectableText with some sample text .

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tutorial - googleflutter.com'),
          ),
          body: ListView(children: <Widget>[
            Container(
              padding: EdgeInsets.all(20),
              child: SelectableText(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                textAlign: TextAlign.center,
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              )),
          ])),
    );
  }
}

When you long press on part of the text, piece of the text would be selected and you can use the seekers to change the start and end of your selection.

Screenshot

Summary

In this Flutter Tutorial, we learned how to use SelectableText widget to place a text in your Flutter Application that can be selected, with the help of well detailed example Flutter Application.