Flutter : SelectableText

SelectableText

flutter Text 위젯은 화면에 글자를 그리지만 사용자가 텍스트를 복사는 할 수 없다.

TextField 위젯 처럼 텍스트를 복사할 수 있는 위젯을 보자.

SelectableText

SelectableText(String text, { Key key, InputlessFocusNode focusNode, TextStyle style, TextAlign textAlign: TextAlign.start, TextDirection textDirection, Radius cursorRadius, Color cursorColor, DragStartBehavior dragStartBehavior: DragStartBehavior.down, bool enableInteractiveSelection: true, GestureTapCallback onTap })

복사할 수 있는 텍스트를 그릴 수 있는 위젯이다. Text 와 비슷하게 사용할 수 있다.

TextStyle 을 적용하거나 cursor 를 설정할 수 있다.

	class MySelectableText extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('Selectable Text'),
	),
	body: SingleChildScrollView(
	child: Center(
	child: Column(
	children: <Widget>[
	// picture from https://www.pexels.com/photo/dog-with-brown-faux-fur-headband-800330/
	Image.asset('images/adorable-animal-canine-800330.jpg'),
	Padding(
	padding: EdgeInsets.only(top: 10.0),
	child: SelectableText('Me, a dog'),
	),
	Padding(
	padding: EdgeInsets.only(top: 10.0),
	child: SelectableText(
	'noticed that I\'m',
	style: TextStyle(
	color: Colors.blue,
	backgroundColor: Colors.red[100].withOpacity(0.6),
	fontSize: 20,
	fontWeight: FontWeight.bold,
	),
	),
	),
	Padding(
	padding: EdgeInsets.only(top: 10.0),
	child: SelectableText.rich(
	TextSpan(
	text: 'not ' ,
	style: Theme.of(context).textTheme.display1,
	children: <TextSpan>[
	TextSpan(
	text: 'a ',
	style: Theme.of(context).textTheme.display2,
	),
	TextSpan(
	text: 'lion',
	style: Theme.of(context).textTheme.display3,
	),
	],
	),
	showCursor: true,
	cursorWidth: 3.0,
	cursorColor: Colors.green,
	),
	),
	Padding(
	padding: EdgeInsets.only(top: 50.0),
	child: Container(
	width: 200.0,
	height: 50.0,
	child: TextField(
	decoration: InputDecoration(
	border: OutlineInputBorder(),
	),
	),
	),
	)
	],
	),
	),
	)
	);
	}
	}

view raw selectabletext.dart hosted with ❤ by GitHub

Reference

SelectableText (Flutter Widget of the Week) - YouTube