tv_textfield 1.0.1
tv_textfield: ^1.0.1 copied to clipboard
A TV-friendly TextField that fixes D-pad focus issues and supports both software and hardware keyboards on Android TV, Apple TV, and other platforms.
tv_textfield #
A Flutter package that fixes common TV / remote control issues with TextField on Android TV, Apple TV, and other platforms — including D-pad focus getting stuck after the on-screen keyboard is dismissed (flutter#147772).
Platform support #
| Platform | Default backend | Soft keyboard | Hardware keyboard |
|---|---|---|---|
| Android TV | Native EditText |
Yes | Yes |
| Apple TV (tvOS) | Native UITextField |
Yes (system keyboard) | Yes (Bluetooth) |
| iOS / iPadOS | Flutter | Yes | Yes |
| Android phone | Native EditText |
Yes | Yes |
| macOS / Windows / Linux | Flutter | N/A | Yes |
| Web | Flutter | Browser keyboard | Yes |
Works with flutter-tvos for Apple TV builds.
Features #
- D-pad / Siri Remote friendly — move between fields with arrows when not editing
- Select / Enter to edit — opens the keyboard without trapping navigation
- Back / Menu / Escape to dismiss — closes the keyboard and releases focus
- Cross-platform — native views on Android and Apple TV, Flutter fallback elsewhere
- Drop-in API — familiar
TextField-like parameters
Installation #
dependencies:
tv_textfield: ^0.1.0
Usage #
Initialize platform detection (recommended for Apple TV auto-detection), wrap your app with TvTextFieldScope, and use TvTextField:
import 'package:flutter/material.dart';
import 'package:tv_textfield/tv_textfield.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await initializeTvTextField();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TvTextFieldScope(
child: MyHomePage(),
),
);
}
}
TvTextField(
controller: controller,
focusNode: focusNode,
decoration: InputDecoration(
labelText: 'Search',
border: OutlineInputBorder(),
),
textInputAction: TextInputAction.search,
onSubmitted: (value) => debugPrint('Submitted: $value'),
)
Remote controls #
| Action | Android TV | Apple TV |
|---|---|---|
| Move focus | D-pad arrows | Siri Remote swipe |
| Start editing | Select / Enter | Select (center click) |
| Dismiss keyboard | Back | Menu |
Implementation modes #
| Mode | Description |
|---|---|
auto (default) |
Native on Android; native on tvOS; Flutter elsewhere |
flutter |
Pure Flutter with TV focus fixes |
native |
Native on Android or Apple platforms |
androidNative |
Force Android EditText |
appleNative |
Force Apple UITextField |
TvTextField(
implementation: TvTextFieldImplementation.flutter,
// ...
)
Example #
cd example
flutter run # mobile / desktop
flutter run -d <tv-device> # Android TV or Apple TV
Android TV #
Add the leanback launcher category if needed:
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>
Apple TV #
Use the flutter-tvos toolchain to build for tvOS. The plugin registers for both ios and tvos targets with shared Swift sources.
How it works #
Flutter mode shows a read-only field display while focused but not editing. D-pad arrows are not consumed, so focus traversal keeps working. When the user activates the field, a real TextField is shown for typing.
Native mode embeds a platform text field (EditText on Android, UITextField on Apple platforms), delegating soft-keyboard behavior to the OS — the recommended approach for TV devices.
License #
MIT