Very simple code like this
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(),
body: PageView(
children: [
Column(
children: [
TextField(),
TextField(),
],
),
Center(child: Text("2")),
Center(child: Text("3")),
Center(child: Text("4")),
],
),
),
);
}
}
Input something on the textfield, then go to the next page, then back. Can't delete anything now, but can input? If click another textfield and then click back, everything is back to normal.
you can clear your controller after clicking back from second screen to first screen, try below code
Navigator.push(
context,
new MaterialPageRoute(
builder: (BuildContext context) =>
new SecondScreen())).then((res) {
yourControllerTextField.clear();
}).catchError((err) {
print(err);
});
Related
When I navigate from drawer to any page and return back the drawer keeps open.
For example:
The drawer contains two-button and if I button one and then back, then second and then back.
Now if I press back button of android it will repeat all activities like in chrome.
Hope you get my point. If you need to know anything else from me. let me know
Hope this helps.
void main() {
runApp(
MaterialApp(
routes: {
"/": (context) => HomePage(),
"/settings": (context) => SettingsPage(),
},
),
);
}
String _currentRoute = "/";
Widget buildDrawer(context) {
return Drawer(
child: SafeArea(
child: Column(
children: <Widget>[
ListTile(
title: Text("Home"),
onTap: () => doRoute(context, '/'),
),
ListTile(
title: Text("Settings"),
onTap: () => doRoute(context, '/settings'),
),
],
),
),
);
}
void doRoute(BuildContext context, String name) {
if (_currentRoute != name)
Navigator.pushReplacementNamed(context, name);
else
Navigator.pop(context);
_currentRoute = name;
}
// Page 1 (HomePage)
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Home")),
body: Container(color: Colors.blue.withOpacity(0.5)),
drawer: buildDrawer(context),
);
}
}
// Page 2 (SettingsPage)
class SettingsPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Settings")),
body: Container(color: Colors.orange.withOpacity(0.5)),
drawer: buildDrawer(context),
);
}
}
What codes should I use to go back to the page with the flutter android back button? I looked inside youtube, especially on Stackoverflow, but I couldn't get any results.
You can use WillPopScope
Here is example code:
class MyPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
// This function will handle back button
// When true, it's can back to previous page
// when false, back button will do nothing
return true;
},
child: Scaffold(
appBar: AppBar(
title: const Text('Flutter WillPopScope demo'),
),
body: Center(
child: Text('Hello world')
),
),
);
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new WillPopScope(
child: new Scaffold(
appBar: new AppBar(
title: new Text('Page 2'),
),
body: new Center(
child: new Text('PAGE 2'),
),
),
onWillPop: () async {
return false;
},
);
}
}
Future<T> pushPage<T>(BuildContext context, Widget page) {
return Navigator.of(context)
.push<T>(MaterialPageRoute(builder: (context) => page));
}
Can call the page like:
pushPage(context, Page2());
I am trying to make navigation by serving pages via BLoC (flutter_bloc 6.1.1).
main.dart:
class MyApp extends StatelessWidget {
List<MaterialPage> _pages = [
MaterialPage( key: ValueKey('Page1'), child: Page1() ),
];
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: BlocProvider(
create: (BuildContext context) => NavCubit(),
// WHY PAGES NOT UPDATES HERE FROM BLoC?????
child: BlocListener<NavCubit, NavState>(
listener: (context, state) {
_pages = state.pages;
},
child: Navigator(
pages: _pages,
onPopPage: (route, result) {
if ( !route.didPop(result) ) {
return false;
}
return true;
},
)
)
),
);
}
}
The first page (Page 1) has a button, clicking on which should navigate to the second page (Page2)
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => NavCubit(),
child: Scaffold(
appBar: AppBar( title: Text('Page 1') ),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("page 11111111111"),
RaisedButton(
child: Text('Go to: Page 2', style: TextStyle(fontSize: 20)),
onPressed: () {
print("goto page2 btn");
context.read<NavCubit>().navigateTo();
},
),
],
)
),
),
);
}
}
class NavCubit extends Cubit<NavState> {
...
void navigateTo() {
final navState = NavState([MaterialPage( key: ValueKey('Page2'), child: Page2() )]);
debugPrint(navState.toString());
emit(navState);
}
}
But it doesn't happen!
As far as I can see, the BLoC State are updated good. But no screen changes...
SEE PLS:
Here my full test project: https://github.com/morfair/flutter_test_app/tree/master/lib
In Page1 you are creating another NavCubit in the BlocProvider. Therefore you have 2 NavCubits in total. So when you then call context.read<NavCubit>.navigateTo(), you are calling this method on the wrong NavCubit. Try to remove the creation of a second cubit in the BlocProvider in the Page1 build method.
I have a MaterialApp in which it has an IndexedStack as its homePage, to use it for BottomBarNavigation. Now, in one of the "Tab"s, I want page transitions to be done like it is done in iOS.
Part of the trick can be done using CupertinoPageRoute in Navigator.push as follows:
Navigator.of(context, rootNavigator: true).push(CupertinoPageRoute<bool>(
//fullscreenDialog: true,
builder: (BuildContext context) => new DescriptionPage(),
));
this results the new page to slide from right as an iOS app. But, I also want the first page to be shifted to right with parallax, as it says in the CupertinoPageRoute's documentation:
The page also shifts to the left in parallax when another page enters to cover it.
this will be done if the first page itself is created via "Navigator.push(CupertinoPageRoute ...", but as I mentioned, my first page is one of the main pages of the application's home.
current transition style:
the new page slides in from right, but the current page does not shift to left
as you can see, the current page does not shift to left. There might be a way to make the current page's widget to act as a widget built by a CupertinoPageRoute, so that the current page itself slides to left as the new page comes in.
In the theme: parameter of MaterialApp, try this:
MaterialApp(
theme: ThemeData( //or replace with your custom ThemeData.copywith()
pageTransitionsTheme: PageTransitionsTheme(
builders: {
TargetPlatform.android: CupertinoPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder()
}
),
),
)
If you run the code below, you will see that First Tab is doing what you are seeing and second Tab is what you are expecting.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CupertinoStoreHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class CupertinoStoreHomePage extends StatelessWidget {
const CupertinoStoreHomePage({title});
#override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.bell),
title: Text('TAB1'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.bell_solid),
title: Text('TAB2'),
),
],
),
tabBuilder: (context, index) {
switch (index) {
case 0:
return CupertinoTabView(builder: (context) {
return CupertinoPageScaffold(
child: TAB1(),
);
});
case 1:
return CupertinoTabView(
builder: (context) {
return CupertinoPageScaffold(
child: TAB2(),
);
},
routes: {
'/screen': (ctx) => NextScreen(),
},
);
default:
return Container();
}
},
);
}
}
class TAB1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TAB1"),
),
body: Container(
child: FlatButton(
child: Text("Go To Next Screen"),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => NextScreen())),
),
),
);
}
}
class TAB2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TAB2"),
),
body: Container(
child: FlatButton(
child: Text("Go To Next Screen"),
onPressed: () => Navigator.of(context).pushNamed("/screen"),
)),
);
}
}
class NextScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Scaffold(
appBar: AppBar(
title: Text("NextScreen"),
),
body: Container(
child: Text("NextScreen"),
),
),
);
}
}
When using Navigator.of(ctx).push the app tries to push new screen on root navigator, which in your case is tab bar but it fails to replace the tab bar, hence you see incomplete animation. But with second approach where you have defined route in relevant tab and use Push Named, the app uses navigator assigned to that tab and hence expected result.
Happy Coding!
I'm new to flutter and I'm working on an App that have multiple screens.
I would like to know to stop flutter from creating multiple screens of the same route,
for example I have Page 1 and Page 2, if I click on the button to navigate to Page 2 and clicked again on the same button the application will push a new screen of Page 2 and i will have it twice and if I click on the return button it will send me back to the first created Page 2
is there a way to create every page only once and then reopen it if it's already pushed to the stack ?
I'm using Navigator.push for all my navigation
These answers are not correct. PushReplacement will still create a new instance of the widget. That's very simple to identify if you have a scrollable list in RouteA and scroll it before navigating to a RouteB. When you pushReplacement(RouteA) , you'll see the scrolling position have changed to its initial state. That is because a new widget was instantiated, and that is not the behaviour you want.
You should use popUntil, as previously answered by JoaoSoares
Using a simple logic here
If the new page is the same as the current page then use Navigator.push(context,route).
If the new page is the different then use Navigator.pushReplacement(context,route).
In case if you are using named routes then for
same page as current, use Navigator.pushNamed(context,name).
different page, use Navigator.pushReplacementNamed(context,name).
Complete code sample
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SO(),
);
}
}
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageOne(),
);
}
}
class PageOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page 1'),
),
backgroundColor: Colors.amber,
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
onPressed: () {
print('creating replacement page 1');
Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) {
return PageOne();
}));
},
child: Text('Go to page 1'),
),
RaisedButton(
onPressed: () {
print('creating new page 2');
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
return PageTwo();
}));
},
child: Text('Go to page 2'),
),
],
),
),
);
}
}
class PageTwo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page 2'),
),
backgroundColor: Colors.brown,
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
onPressed: () {
print('creating new page 1');
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => PageOne()));
},
child: Text('Go to page 1'),
),
RaisedButton(
onPressed: () {
print('creating replacement page 2');
Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) => PageTwo()));
},
child: Text('Go to page 2'),
),
],
),
),
);
}
}
You should use Navigator.pushReplacement(). Here are the docs: https://api.flutter.dev/flutter/widgets/NavigatorState/pushReplacement.html
In summary, when you call pushReplacement, it pushes a new page but also disposes of the previous one. Now, when you press the back button, it should bring you back to page 1.