How can I make the keyboard fill the full screen?

[pegvin]

I am trying to make a keyboard app using this library, Thus I just want to fill the whole app's screen with the keyboard.

How can I do this? I tried the following:

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

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Keyboard',
			builder: OnscreenKeyboard.builder(
				aspectRatio: 16 / 9,
				theme: OnscreenKeyboardThemeData.ios(),
				showControlBar: false,
			),
			home: const MyHomePage(),
		);
	}
}

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

	@override
	State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
	late final kbd = OnscreenKeyboard.of(context);

	@override
	void initState() {
		super.initState();

		WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
			kbd.open();
		});
	}

	@override
	Widget build(BuildContext context) {
		return SizedBox.shrink();
	}
}

As my window's aspect ratio is 16 / 9 as well (800x450), But this results in bottom overflow by 14px:

Although doing the same but without any custom theming fills the screen just fine.

[albinpk]

@pegvin This happens because:

• aspectRatio applies only to the layout, not the full keyboard container.
• The keyboard is wrapped in a SafeArea by default, which prevents edge-to-edge sizing.
• The ios theme adds its own internal padding, which further decreases the available height.

[albinpk]

A new theme property useSafeArea has been added #28

Set this to false when you want the keyboard to extend edge-to-edge.

Example

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return MaterialApp(
          title: 'Keyboard',
          builder: OnscreenKeyboard.builder(
            aspectRatio: constraints.maxWidth / constraints.maxHeight,
            theme: OnscreenKeyboardThemeData.ios().copyWith(
              padding: EdgeInsets.zero,
              useSafeArea: false,
            ),
            showControlBar: false,
          ),
          home: const MyHomePage(),
        );
      },
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final kbd = OnscreenKeyboard.of(context);

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      kbd.open();
    });
  }

  @override
  Widget build(BuildContext context) {
    return const SizedBox.shrink();
  }
}