Related
I have a flutter app and I do experience a strange behaviour when the keyboard get activated in my iPhone. As you can see from the picture below there is a white background which appears under the keyboard while it is popping up...
Does anyone know how to set that background color???
EDIT:
Thanks for the suggestion to use resizeToAvoidBottomPadding. That command is deprecated and I have replaced with resizeToAvoidBottomInset: false. This has resolved the issue (yup!) and there is no more white background under the keyboard BUT it has created another strange effect. There is now a dark-blue bar above the keyboard. Check the next image... I have set an orange background color so you can see it better. You can also see that the floating button is shifted up which means the dark-blu bar is now between the keyboard and the scaffold. Do you know how I can get rid of that bar? this seems to be worst Thant the white background since it is taking precious screen space..
For reference the scaffold is nested in a CupertinoTabScaffold
Here is the most relevant part of my code
void main() async {
Crashlytics.instance.enableInDevMode = true;
FlutterError.onError = Crashlytics.instance.recordFlutterError;
runApp(ChangeNotifierProvider<Data>(
builder: (context) => Data(),
child: new CupertinoApp(
theme: CupertinoThemeData(
barBackgroundColor: kColorPrimary,
primaryColor:
kColorText,
textTheme: CupertinoTextThemeData(
primaryColor:
kColorText,
navLargeTitleTextStyle: TextStyle(
fontWeight: FontWeight.bold, fontSize: 70.0, color: kColorText),
),
),
home: new CheckIfFirstTime(),
),
));
}
class CheckIfFirstTime extends StatefulWidget {
#override
_CheckIfFirstTimeState createState() => _CheckIfFirstTimeState();
}
class _CheckIfFirstTimeState extends State<CheckIfFirstTime> {
Future checkFirstSeen() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
bool _seen = (prefs.getBool('seen') ?? false);
if (_seen) {
Navigator.of(context).pushReplacement(
new MaterialPageRoute(builder: (context) => new HomeScreen()));
}
}
#override
void initState() {
super.initState();
checkFirstSeen();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kColorPrimary,
body: Text(
'loading...',
style: kSendButtonTextStyle,
),
);
}
}
class HomeScreen extends StatefulWidget {
static const String id = 'home';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int currentIndex = 0;
void confirmPlatform() {
if (Platform.isIOS)
appData.isIOS = true;
else
appData.isIOS = false;
}
#override
void initState() {
// TODO: implement initState
super.initState();
confirmPlatform();
}
#override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
resizeToAvoidBottomInset: false,
tabBar: CupertinoTabBar(
backgroundColor: kColorPrimaryLight,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Discover', style: TextStyle(fontFamily: kFontFamily)),
),
BottomNavigationBarItem(
icon: Badge(
showBadge: Provider.of<Data>(context).filterCounter == 0
? false
: true,
badgeContent: Text(
Provider.of<Data>(context).filterCounter.toString(),
style: TextStyle(color: kColorText),
),
child: Icon(Icons.filter_list)),
title: Text('Filters', style: TextStyle(fontFamily: kFontFamily)),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text('Me', style: TextStyle(fontFamily: kFontFamily)),
),
BottomNavigationBarItem(
icon: Icon(Icons.assignment),
title: Text('Stories', style: TextStyle(fontFamily: kFontFamily)),
),
//with badge
BottomNavigationBarItem(
icon: Badge(
showBadge: Provider.of<Data>(context).basketCounter == '0'
? false
: true,
badgeContent: Text(
Provider.of<Data>(context).basketCounter,
style: TextStyle(color: kColorText),
),
child: Icon(Icons.shopping_cart)),
title: Text('Basket', style: TextStyle(fontFamily: kFontFamily)),
),
],
),
tabBuilder: (context, index) {
if (index == 0) {
return CupertinoTabView(
navigatorKey: firstTabNavKey,
builder: (BuildContext context) => DiscoverScreenFinal(),
);
} else if (index == 1) {
return CupertinoTabView(
navigatorKey: secondTabNavKey,
builder: (BuildContext context) => FilterScreen(),
);
} else if (index == 2) {
return CupertinoTabView(
navigatorKey: thirdTabNavKey,
builder: (BuildContext context) => WelcomeScreen(),
);
} else if (index == 3) {
return CupertinoTabView(
navigatorKey: forthTabNavKey,
builder: (BuildContext context) => Stories(),
);
}
{
return CupertinoTabView(
navigatorKey: fifthTabNavKey,
builder: (BuildContext context) => Basket(),
);
}
},
);
}
}
class DiscoverScreenFinal extends StatefulWidget {
#override
_DiscoverScreenFinalState createState() => _DiscoverScreenFinalState();
}
class _DiscoverScreenFinalState extends State<DiscoverScreenFinal> {
#override
Widget build(BuildContext context) {
return TopBarAgnostic(
text: 'Discover',
style: kSendButtonTextStyle,
firstIcon: Icon(Icons.blur_on),
firstIconDestination: CameraApp(),
scannerOn: true,
secondtIcon: Icon(Icons.location_on),
secondIconDestination: MapPage(),
uniqueHeroTag: 'discover001a',
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: kColorPrimary,
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton.extended(
backgroundColor: kColorAccent,
onPressed: () {
//…
},
label: Text(
'To Favorites',
style: kDescriptionTextStyle.copyWith(
fontSize: kFontSizeSmall, fontWeight: FontWeight.bold),
),
icon: Icon(Icons.favorite),
),
body: Container()
),
);
}
}
You have to use this line in Scaffold, it will adjust your view automatically when keyboard is appear and disappear.
resizeToAvoidBottomPadding: false
You could set a backgroundColor to the Scaffold to replace that white background.
This happens because the body of the Scaffold gets resized when you open the keyboard. If you want to avoid the resizing you could set resizeToAvoidBottomInset: false to the Scaffold.
after flutter 2 use this in the Scaffold
resizeToAvoidBottomInset: false,
Best solution is creating a Stack widget with two children: a Container for the background (color, gradient, background image...) and a Scaffold for the app content.
Widget build(BuildContext context) {
return Stack(
children: [
Container(
decoration: /* ... Background styles ... */,
),
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0),
body: Container(
padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
child: SafeArea(bottom: false, child: /* ... App content ... */))
)
]);
}
Basically you can solve this problem by keeping Scaffold inside of Container, like this:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment(0.5, 0.3),
colors: [
Colors.red,
Colors.green,
],
),
),
child: Scaffold(/* ... rest of your code ... */)
)
if you are in develop app in java solve this by just adding android:windowSoftInputMode="adjustPan" in your activity present in the manifest file.
Thanks
you can use
child: Scaffold(
backgroundColor: Color(0xff53ccb2),
I want to show CircularProgressIndicator when ever the webview loads an URL. Below is code but it only shows loading element while initializing the webview.
Widget build(BuildContext context) {
return new MaterialApp(
theme
: new ThemeData(
primaryColor: Color.fromRGBO(58, 66, 86, 1.0), fontFamily: 'Raleway'),
routes: {
"/": (_) => new WebviewScaffold(
url: url,
appBar: new AppBar(
title: Text(title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.close),
onPressed: () => Navigator.of(context).pop(null),
)
],
),
withJavascript: true,
withLocalStorage: true,
appCacheEnabled: true,
hidden: true,
)
},
);
}
I want it to show loading element when user clicks on any link within webview.
its should work for first time, I know that is not exactly what's your looking for but it may help.
WebviewScaffold(
url: "https://www.google.com/",
appBar: new AppBar(
title: const Text('Widget webview'),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
child: const Center(
child: CircularProgressIndicator(),
),
),
);
This doesn't seem to be supported currently.
There is a pull request that seems to provide such a feature
https://github.com/fluttercommunity/flutter_webview_plugin/pull/255
Several related issues/feature requests
https://github.com/fluttercommunity/flutter_webview_plugin/issues/177
https://github.com/fluttercommunity/flutter_webview_plugin/issues/284
https://github.com/fluttercommunity/flutter_webview_plugin/issues/232
https://github.com/fluttercommunity/flutter_webview_plugin/issues/159
This is how I implemented using IndexedStack
class WebViewWidget extends StatefulWidget {
#override
_WebViewWidgetState createState() => _WebViewWidgetState();
}
class _WebViewWidgetState extends State<WebViewWidget> {
var stackToShow = 1;
#override
Widget build(BuildContext context) {
return IndexedStack(
index: stackToShow,
children: [
WebView(
initialUrl: "https://www.google.com/",
onPageFinished: (String url) {
// when page loaded
setState(() {
stackToShow = 0;
});
},
),
Container(child: Center(child: CircularProgressIndicator())),
],
);
}
}
Enjoy coding!
This will work with WebviewScaffold
Just paste it in your Class.
#override
void initState() {
super.initState();
_onPageProgress =
flutterWebViewPlugin.onProgressChanged.listen(progessChange);
}
progessChange(double event) {
print("Page loading " + event.toString());
if (event == 1.0) {
flutterWebViewPlugin.show();
} else {
flutterWebViewPlugin.hide();
}
}
final flutterWebViewPlugin = FlutterWebviewPlugin();
late StreamSubscription<double> _onPageProgress;
Widget build(BuildContext context) {
return WebviewScaffold(
initialChild: Container(
color: Colors.white,
child: Center(
child: CircularProgressIndicator(
color: Colors.blue,
)),
),
hidden: true,
clearCache: true,
withJavascript: true,
url: "https://www.google.com/",
);
}
I have created a Navigation Drawer in Flutter.
Source available here - https://github.com/deadcoder0904/flutter_navigation_drawer
It looks like this -
First Screen
When I click the button, it goes to
Second Screen
When I click the button, it goes to
Tabs Screen
When I click the hamburger icon on First Screen, it goes to
Drawer Screen
Now when I click on the 2nd List Item on Drawer Screen, I get the Second Screen like this
Relevant code is in navigation_drawer.dart which looks like -
class NavigationDrawer extends StatefulWidget {
_NavigationDrawerState createState() => _NavigationDrawerState();
}
class _NavigationDrawerState extends State<NavigationDrawer> {
int _selectionIndex = 0;
final drawerItems = [
DrawerItem("First Screen", Icons.looks_one),
DrawerItem("Second Screen", Icons.looks_two),
DrawerItem("Tabs", Icons.tab),
];
_getDrawerItemScreen(int pos) {
switch (pos) {
case 1:
return SecondScreen();
case 2:
return Tabs();
default:
return FirstScreen();
}
}
_onSelectItem(int index) {
setState(() {
_selectionIndex = index;
_getDrawerItemScreen(_selectionIndex);
});
Navigator.of(context).pop();
}
#override
Widget build(BuildContext context) {
List<Widget> drawerOptions = [];
for (var i = 0; i < drawerItems.length; i++) {
var d = drawerItems[i];
drawerOptions.add(ListTile(
leading: Icon(d.icon),
title: Text(
d.title,
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400),
),
selected: i == _selectionIndex,
onTap: () => _onSelectItem(i),
));
}
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Akshay Kadam (A2K)'),
accountEmail: Text('a2k#gmail.com'),
),
Column(
children: drawerOptions,
),
],
),
),
body: _getDrawerItemScreen(_selectionIndex),
);
}
}
How do I get the Second Screen without the Hamburger Icon & First Screen title?
First, change your code to set HomePage
body: _getDrawerItemScreen(_selectionIndex),
to
body: FirstScreen(),
Secondly,
_onSelectItem(int index) {
setState(() {
_selectionIndex = index;
_getDrawerItemScreen(_selectionIndex);
});
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => _getDrawerItemScreen(_selectionIndex),
),
);
}
I'm using Flutter SearchDelegate in my app and here's the code:
class NameSearch extends SearchDelegate<String> {
#override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
query = "";
},
)
];
}
#override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
onPressed: () {
close(context, null);
},
);
}
#override
Widget buildResults(BuildContext context) {
return null;
}
#override
Widget buildSuggestions(BuildContext context) {
suggestionList = query.isEmpty ? [] : List.generate(nameList.length,
(i) => nameList[i]).where((p) => p.name.startsWith(query)).toList();
return ListView.builder(
itemBuilder: (context, index) => ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(
detail: suggestionList[index],
)));
},
leading: Icon(Icons.book),
title: RichText(
text: TextSpan(
text: suggestionList[index].name.substring(0, query.length),
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: suggestionList[index].name.substring(query.length),
style: TextStyle(color: Colors.grey))
]),
),
),
itemCount: suggestionList.length,
);
}
}
When I clicked on an item in a suggestion list, It gets me to the new detail screen and works properly. But when I want to back to the search screen, the text input become like that:
And I can't insert any text anymore, till restart the app or go to another page and after that go back to search page again!
And here is my DetailScreen code:
class DetailScreen extends StatelessWidget {
final BookDetail detail;
DetailScreen({Key key, #required this.detail}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(detail.name),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text(detail.description),
),
);
}
}
In the line 83 -85 of the flutter search source code :
Once the user has selected a search result, [SearchDelegate.close] should be
called to remove the search page from the top of the navigation stack and
to notify the caller of [showSearch] about the selected search result.
So the the showSearch is structed for single-use only. And you have to call it again when you navigate back from your DetailScreen if you intend to use it for another search query.
I was facing same issue so what i did is i simply copy the search.dart from material library and replace
bool get maintainState => false;
to
bool get maintainState => true;
on line 294 it worked for me.
I want to make a full screen dialog box. Dialog box background must be opaque.
Here is an example:
How to make like this in Flutter?
You can use the Navigator to push a semi-transparent ModalRoute:
import 'package:flutter/material.dart';
class TutorialOverlay extends ModalRoute<void> {
#override
Duration get transitionDuration => Duration(milliseconds: 500);
#override
bool get opaque => false;
#override
bool get barrierDismissible => false;
#override
Color get barrierColor => Colors.black.withOpacity(0.5);
#override
String get barrierLabel => null;
#override
bool get maintainState => true;
#override
Widget buildPage(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
// This makes sure that text and other content follows the material style
return Material(
type: MaterialType.transparency,
// make sure that the overlay content is not cut off
child: SafeArea(
child: _buildOverlayContent(context),
),
);
}
Widget _buildOverlayContent(BuildContext context) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'This is a nice overlay',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('Dismiss'),
)
],
),
);
}
#override
Widget buildTransitions(
BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
// You can add your own animations for the overlay content
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
}
}
// Example application:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Playground',
home: TestPage(),
);
}
}
class TestPage extends StatelessWidget {
void _showOverlay(BuildContext context) {
Navigator.of(context).push(TutorialOverlay());
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Test')),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Center(
child: RaisedButton(
onPressed: () => _showOverlay(context),
child: Text('Show Overlay'),
),
),
),
);
}
}
Well here is my implementation which is quite straightforward.
from first screen
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) =>
RedeemConfirmationScreen()));
at 2nd screen
class RedeemConfirmationScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white.withOpacity(0.85), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
.....
);
}
}
and here are the results.
Screenshot (Flutter's native dialog)
Call this method to show the dialog in fullscreen.
showGeneralDialog(
context: context,
barrierColor: Colors.black12.withOpacity(0.6), // Background color
barrierDismissible: false,
barrierLabel: 'Dialog',
transitionDuration: Duration(milliseconds: 400),
pageBuilder: (_, __, ___) {
return Column(
children: <Widget>[
Expanded(
flex: 5,
child: SizedBox.expand(child: FlutterLogo()),
),
Expanded(
flex: 1,
child: SizedBox.expand(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('Dismiss'),
),
),
),
],
);
},
);
Note: This answer does not discuss making the modal transparent, but is an answer is for the stated question of "How to make a full screen dialog in flutter?". Hopefully this helps other that find this question through a search like I did, that don't need a transparent modal.
Create your modal dialog class:
class SomeDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Dialog Magic'),
),
body: new Text("It's a Dialog!"),
);
}
}
In the class that needs to open the dialog, add something like this:
void openDialog() {
Navigator.of(context).push(new MaterialPageRoute<Null>(
builder: (BuildContext context) {
return new SomeDialog();
},
fullscreenDialog: true));
}
If fullscreenDialog above is true, then the app bar will have an "x" close button. If false, it will have a "<-" back arrow.
If you need to get the result of a dialog action, add a button to your dialog that returns a value when popping the navigation stack. Something like this:
onPressed: () {
Navigator
.of(context)
.pop(new MyReturnObject("some value");
}
then in your class opening the dialog, do capture the results with something like this:
void openDialog() async {
MyReturnObject results = await Navigator.of(context).push(new MaterialPageRoute<MyReturnObject>(
builder: (BuildContext context) {
return new SomeDialog();
},
fullscreenDialog: true));
}
You can use showGeneralDialog method with any widget extends from Material like Scaffold, Card, ..etc.
For example I am going to it with Scaffold like this:
showGeneralDialog(
context: context,
pageBuilder: (context, animation, secondaryAnimation) => Scaffold(
backgroundColor: Colors.black87,
body: //Put your screen design here!
),
);
And now you can set your design as a normal screen by using Scaffold.
Note: if you want to go back you can Navigator like this:
Navigator.of(context).pop(null)
Different ways to show fullscreen dialog
A. Material Dialog
showDialog<void>(
context: context,
useSafeArea: false,
builder: (BuildContext context) {
return const SomeScaffoldView();
},
);
B. Cupertino Dialog
showCupertinoDialog<void>(
context: context,
builder: (BuildContext context) {
return const SomeScaffoldView();
},
);
C. Custom Dialog
Flutter uses this under-the-hood when displaying dialogs.
Can customize transition animation with transitionBuilder, here's a random guide with example animations.
showGeneralDialog(
context: context,
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return const SomeScaffoldView();
},
);
Sample Scaffold View used in above snippets.
class SomeScaffoldView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Fullscreen Dialog'),
),
body: const Center(child: Text('Dialog Body')),
);
}
}
You can use AlertDialog with zero insetPadding like below:
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
insetPadding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
content: SizedBox.expand(
child: Column(
children: <Widget>[
SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Wrap(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Text(
"Sample type",
style: TextStyle(fontWeight: FontWeight.w700),
),
),
Expanded(flex: 1, child: Text(""))
],
),
],
)),
],
),
));
});
},
);
RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.
Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();
RFlutter
It's easy to use! :)
you can do like this if you use popular flutter library getx
getx link
void showAlertDialogg(
String body,
String? confirmButtonText,
String? cancelButtonText,
Function(bool onConfirm, bool onCancel) clickEvent,
{barrierDismissible = false}) {
Get.dialog(
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextComponent(
body,
textAlign: TextAlign.center,
fontSize: textSmallFontSize,
fontWeight: titleFontWeight,
color: Colors.white,
),
Row(
//crossAxisAlignment : CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: OutlineButtonComponent(
text: cancelButtonText,
borderColor: kPrimaryColor,
onPressed: () {
Get.back();
clickEvent(false, true);
},
textColor: kPrimaryColor,
padding: EdgeInsets.fromLTRB(16, 16, 8, 16),
),
),
Expanded(
flex: 1,
child: ButtonComponent(
text: confirmButtonText,
buttonColor: kPrimaryColor,
onPressed: () {
Get.back();
clickEvent(true, false);
},
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(8, 16,16, 16),
),
),
],
)
],
),
barrierColor: Colors.black12.withOpacity(0.8),
useSafeArea: true
);
}
you can pas params as you want & call this method where you need it. it supports widget so you can setup the widget as you want.
Wrap your top-level widget with Navigator widget like so:
return Navigator(
pages: [
MaterialPage(
child: MainScreen(
child: widgets...
then call showDialog and because useRootNavigator is set to true in default it will use the root navigator that we added above the MainScreen