Flutter | Navigate To New Page

 

You can download the project from : 

https://unpossiblepog.com/codes/DART+FLUTTER/Flutter-Redirect-To-Another-Page

1. To add a button (on click of which we have to open new page), remove Center() function and following code.

Column(children: <Widget>[

])

--------------------

2. Then to copy-paste the following code to add a manual button inside box bracket of Column function.

new RaisedButton(
child: new Text('Add Data'),
onPressed: () {

Navigator.push(
context,
MaterialPageRoute(builder: (context) => insertPage()),
);

},
)

--------------------
3. Observe that the function “insertPage” will be highlighted as an error. We have to call create a new dart page which will have “insertPage” as a class name.

So create a new dart file, give it any random name.

Then copy-paste the following code in that newly created file.

import 'package:flutter/material.dart';


class insertPage extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {

TextStyle textStyle = Theme.of(context).textTheme.title;
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
child: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
child: TextField(
//controller: titleController,
style: textStyle,
onChanged: (value) {
debugPrint('Something changed in Title Text Field');
//updateTitle();
},
decoration: InputDecoration(
labelText: 'Title',
labelStyle: textStyle,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)
)
),
),
),
Padding(

padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
color: Theme.of(context).primaryColorDark,
textColor: Theme.of(context).primaryColorLight,
child: Text(
'Save',
textScaleFactor: 1.5,
),
onPressed: () {
debugPrint("Save button clicked");
//_save(context);
//_showAlertDialog("ok","ok",context);
},
),
),

Container(width: 5.0,),

],
),

)
]
)
),
);

}
}

--------------------

4. After that, we have to call that new file in our main file so copy-paste the following code at the top of main.dart page in import section.

import 'insertPage.dart';

--------------------

DIALOGS:

Subscribe my Channel:-
http://www.youtube.com/user/SanketRooney?sub_confirmation=1

Facebook Page:-
https://www.facebook.com/UnpossibleNS

Twitter Account:-
https://twitter.com/UnpossiblePOG

Hey guys, in this video I shall add a button which will redirect to new page in flutter application.

I have created a new basic project. By default, it has a button which displays click count.

I provided a blog link which contains instructions and codes.

For first instruction, copy the code. In Flutter project, remove the default Center function if you have it.

Paste the code.

Then from second instruction, copy the code, and paste it inside Column function.

You can add 2 buttons, but make sure to add comma between them.

Anyway, currently I will be adding only one button.

As you can see, when I try to save it, it gives me an error.

It is because we currently don’t have insertPage() function.

Change button text if you want to.

Then, from the 3^rd instruction, copy the whole code.

In Android Studio, create a new dart file in LIB folder.

Paste the code in it.

Now, we he have to import that newly created dart file inside our main.dart.

Go to the top, import the page. Make sure to give same name as you gave it to a newly created dart file, in my case it is newPage.dart.

Now, let’s check it on simulator.

When I click on a button, it will open a new page.

To go back, there is a back button automatically added.

So that is it, thanks for watching. Like share and subscribe.