How to Make a Text Widget Selectable in Flutter

By Rashid •  Updated on: December 24th, 2022 • 

Sometimes you may want to make the Text content of your mobile selectable to use functionalities such as copy. In this Flutter tutorial, let’s check how to make a Text selectable in Flutter.

Making a text selectable is pretty easy in Flutter, you just need to use the SelectableText widget. You can use the SelectableText widget as given below.

SelectableText(
  'Hello! How are you?',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)

Following is the complete example of the Flutter selectable text.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Flutter Selectable Text Example',
        ),
      ),
      body: const Center(
          child: SelectableText(
        'Hello! Welcome to Flutterforyou.com. You will get useful Flutter tutorials here.',
        textAlign: TextAlign.center,
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 18, color: Colors.green),
      )),
    );
  }
}

And here’s the output of this Flutter tutorial.

selectable text flutter example

Thank you for reading!

Keep Reading