12. Flutter Tutorial for Beginners – Multiple Screen

0
432

Step 1. Open a flutter project

Step 2. Right Click on ‘lib’ directory, then select ‘New’, then select ‘Dart File’

Step 3. Give a name of that file and click ‘OK’

Step 4. Write the following code to make a UI of the Second Page

import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the Second Page'),
      ),
    );
  }
}

Step 5. Then go back to the main.dart file. Because of we are going to secondPage.dart from main.dart. And after open main.dart, first you have to import the Second Page

import 'package:flutter_tutorial/secondPage.dart';

Step 6. Create a Raised Button which performed the routing to go to the Second Page. And create a onPressed () Event into the button. Call the class of the second page into the MaterialPageToute.

RaisedButton(
  child: Text('Go to Second Page'),
  onPressed: (){
    Route route = MaterialPageRoute(builder: (context) => SecondPage());
    Navigator.push(context, route);

  },
),

Boom. It’s done…

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_tutorial/secondPage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Column(
        children: [
          Center(
            child: Text('Hello'),
          ),
          RaisedButton(
            child: Text('Go to Second Page'),
            onPressed: (){
              Route route = MaterialPageRoute(builder: (context) => SecondPage());
              Navigator.push(context, route);

            },
          ),
        ],
      ),
    );
  }

}

LEAVE A REPLY

Please enter your comment!
Please enter your name here