[Flutter] How to delete the background white block of bottomNavigationbar in flutter normally

I don't know why the bottomNavigationbar will have a white flash when the keyboard is folded up

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
runApp(const MyApp());
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
));
}

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

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

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

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

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
systemNavigationBarColor: Colors.black.withOpacity(0),
),
child: Scaffold(
extendBody: true,
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
bottomNavigationBar: SafeArea(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(color: Theme.of(context).colorScheme.outlineVariant.withOpacity(0.5), blurRadius: 12),
],
),
margin: const EdgeInsets.only(left: 38, right: 38, bottom: 7),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
child: Row(
children: [
FilledButton(onPressed: () {}, child: const Text('add')),
FilledButton(onPressed: () {}, child: const Text('add')),
],
),
),
),
body: CustomScrollView(
slivers: [
const SliverToBoxAdapter(
child: Column(
children: [
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
ListTile(title: Text('Item 4')),
ListTile(title: Text('Item 5')),
ListTile(title: Text('Item 6')),
ListTile(title: Text('Item 6')),
ListTile(title: Text('Item 6')),
ListTile(title: Text('Item 7')),
ListTile(title: Text('Item 8')),
ListTile(title: Text('Item 8')),
],
),
),
const SliverToBoxAdapter(
child: TextField(),
),
SliverList.builder(
itemBuilder: (v, a) {
return Card(
child: ListTile(title: Text('Item $a')),
);
},
itemCount: 10),
],
),
),
);
}
}


I don't know why the bottomNavigationbar will have a white flash when the keyboard is folded up

When clicking on the input box to pop up the keyboard and then retract the keyboard, bottonNavigationBar will appear a white screen block flashing

https://github.com/user-attachments/assets/7d503bd9-8ada-4622-9da4-8b9a8b96fad4

Continue reading...