この記事はこんな人におすすめ！
- TextFieldの右にアイコンを表示したい
今回はTextFieldまたはTextFormFieldの右端にアイコンボタンを表示する方法を紹介します。
目次
TextFieldの右端にアイコンを表示する方法
TextFieldの右端にアイコンを表示するにはTextField＞decoration＞InputDecoration＞suffixIconの引数にIconButtonを渡します。
TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(
Icons.visibility,
),
onPressed: () {},
),
),
)
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: TextField(
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(
Icons.visibility,
),
onPressed: () {},
),
),
),
),
),
),
);
}
}