Flutter App Tutorial

flutter create appname Explain folder structure Create assets/images folder Add images Add

flutter...
  assets:
   - assets/images/

in pubspec.yaml

Clear all main.dart

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

create MyApp Class

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: homescreen(),
    );
  }
}

Create home.dart for homescreen() class

import 'package:flutter/material.dart';

Import home.dart in main.dart

import 'home.dart';

Work on home.dart now, Create homescreen class appbar then body : body has image , textinput, and a button. For textinput a new dart file Then implement drawer

import 'explore.dart';
import 'secondscreen.dart';
import 'package:flutter/material.dart';
import 'textInput.dart';

class homescreen extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    double h= MediaQuery.of(context).size.height ;
    return Scaffold(
      appBar: AppBar(title: Text('Tourism App'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text("Tourism App"),
              decoration: BoxDecoration(
                color: Colors.transparent,
                image: DecorationImage(
                  image: AssetImage("assets/drawerheader.jpg"),
                     fit: BoxFit.cover)
              ),
            ),
            ListTile(
              title: Text("Home"),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) => homescreen()));
              },
            ),
            ListTile(
              title: Text("Explore"),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) => Explore()));
              },
            ),
          ],
        ),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Column(
            //mainAxisAlignment: MainAxisAlignment.start,
            //crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Image.asset('assets/images/homeimg.jpg', alignment: Alignment.center),
              textInput(),
              ElevatedButton(
                child: Text("Explore"),
                onPressed:(){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen(),)
                  );
                } ,),
              ]
            ),
      ),
    ); 
  }
}

in textinput.dart

import 'package:flutter/material.dart';

class textInput extends StatefulWidget{
  @override 
  input createState() => new input();
}

class input extends State<textInput> {

  String result="";

  @override 
  Widget build(BuildContext context){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
      const Padding(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: "Place"
            ),
          ),
      ),
      ],
    );
  }
}

If time permits then button navigation: create secondscreen for navigation:

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return MaterialApp(
      title:"Tourism App" ,
      home: Scaffold(
      appBar: AppBar(title: Text("Yet to come"),),
      body: Center(
        child: ElevatedButton(
          child: Text("Home"),
          onPressed: (){
            Navigator.pop(context);
          } ),
      )
      ),);
  }
}

Explore section (Incomplete)

import 'package:flutter/material.dart';

class Explore extends StatelessWidget{

  List<String> images= ['https://4.bp.blogspot.com/-j1rGJ7HQn1M/UtfKuF3yPRI/AAAAAAAAEVU/N2lUwaTodtw/s1600/alappuzha-in-kerala.jpg',
  'https://assets.traveltriangle.com/blog/wp-content/uploads/2016/11/Suntemple-Konark.jpg',
  'https://spiderimg.amarujala.com/assets/images/2021/02/11/beautiful-tourist-places-in-the-world_1613035930.jpeg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLyXWTSZuogUeSZ8K2MUCDPG8WwByGrIHBAg&usqp=CAU',
  'https://4.bp.blogspot.com/-j1rGJ7HQn1M/UtfKuF3yPRI/AAAAAAAAEVU/N2lUwaTodtw/s1600/alappuzha-in-kerala.jpg',
  'https://assets.traveltriangle.com/blog/wp-content/uploads/2016/11/Suntemple-Konark.jpg',
  'https://spiderimg.amarujala.com/assets/images/2021/02/11/beautiful-tourist-places-in-the-world_1613035930.jpeg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLyXWTSZuogUeSZ8K2MUCDPG8WwByGrIHBAg&usqp=CAU',
  'https://4.bp.blogspot.com/-j1rGJ7HQn1M/UtfKuF3yPRI/AAAAAAAAEVU/N2lUwaTodtw/s1600/alappuzha-in-kerala.jpg',
  'https://assets.traveltriangle.com/blog/wp-content/uploads/2016/11/Suntemple-Konark.jpg',
  'https://spiderimg.amarujala.com/assets/images/2021/02/11/beautiful-tourist-places-in-the-world_1613035930.jpeg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLyXWTSZuogUeSZ8K2MUCDPG8WwByGrIHBAg&usqp=CAU'
  ];
  @override 
  Widget build(BuildContext context){
    return MaterialApp(
      title:"Tourism App" ,
      home: Scaffold(
      appBar: AppBar(title: Text("Explore"),),
      body: GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(12, (index) {
            return Center(
              child: Padding(
              padding: const EdgeInsets.all(8.0),

              // Image.network(src)             
              child: Image.network(images[index],fit: BoxFit.cover,),

            ),
            );
          }),
        ),
      ),
      );
  }
}

For Day 2: Corrections in image name textInput correction

return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
      const Padding(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: "Place"
            ),
          ),
      ),
      ],
    );

Add button in home.dart

ElevatedButton(
                child: Text("Explore"),
                onPressed:(){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen(),)
                  );
                } ,),

Create secondscreen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return MaterialApp(
      title:"Tourism App" ,
      home: Scaffold(
      appBar: AppBar(title: Text("Yet to come"),),
      body: Center(
        child: ElevatedButton(
          child: Text("Home"),
          onPressed: (){
            Navigator.pop(context);
          } ),
      )
      ),);
  }
}

From drawer header, add navigation, first to home item:

ListTile(
              title: Text("Home"),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) => homescreen()));
              },
            ),

Create a new page for explore section. explore.dart:

import 'package:flutter/material.dart';

class Explore extends StatelessWidget{
 @override 
  Widget build(BuildContext context){
    return MaterialApp(
      title:"Tourism App" ,
      home: Scaffold(
      appBar: AppBar(title: Text("Explore"),),
      );
  }
}

Route the explore page from navigation drawer:

ListTile(
              title: Text("Explore"),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                Navigator.of(context).pop();
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) => Explore()));
              },
            ),

Complete the Explore section:

import 'package:flutter/material.dart';

class Explore extends StatelessWidget{

  List<String> images= ['https://4.bp.blogspot.com/-j1rGJ7HQn1M/UtfKuF3yPRI/AAAAAAAAEVU/N2lUwaTodtw/s1600/alappuzha-in-kerala.jpg',
  'https://assets.traveltriangle.com/blog/wp-content/uploads/2016/11/Suntemple-Konark.jpg',
  'https://spiderimg.amarujala.com/assets/images/2021/02/11/beautiful-tourist-places-in-the-world_1613035930.jpeg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLyXWTSZuogUeSZ8K2MUCDPG8WwByGrIHBAg&usqp=CAU',
  'https://4.bp.blogspot.com/-j1rGJ7HQn1M/UtfKuF3yPRI/AAAAAAAAEVU/N2lUwaTodtw/s1600/alappuzha-in-kerala.jpg',
  'https://assets.traveltriangle.com/blog/wp-content/uploads/2016/11/Suntemple-Konark.jpg',
  'https://spiderimg.amarujala.com/assets/images/2021/02/11/beautiful-tourist-places-in-the-world_1613035930.jpeg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLyXWTSZuogUeSZ8K2MUCDPG8WwByGrIHBAg&usqp=CAU',
  'https://4.bp.blogspot.com/-j1rGJ7HQn1M/UtfKuF3yPRI/AAAAAAAAEVU/N2lUwaTodtw/s1600/alappuzha-in-kerala.jpg',
  'https://assets.traveltriangle.com/blog/wp-content/uploads/2016/11/Suntemple-Konark.jpg',
  'https://spiderimg.amarujala.com/assets/images/2021/02/11/beautiful-tourist-places-in-the-world_1613035930.jpeg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLyXWTSZuogUeSZ8K2MUCDPG8WwByGrIHBAg&usqp=CAU'
  ];
  @override 
  Widget build(BuildContext context){
    return MaterialApp(
      title:"Tourism App" ,
      home: Scaffold(
      appBar: AppBar(title: Text("Explore"),),
      body: GridView.count(
          // Create a grid with 2 columns. If you change the scrollDirection to
          // horizontal, this produces 2 rows.
          crossAxisCount: 2,
          // Generate 100 widgets that display their index in the List.
          children: List.generate(12, (index) {
            return Center(
              child: Padding(
              padding: const EdgeInsets.all(8.0),

              // Image.network(src)             
              child: Image.network(images[index],fit: BoxFit.cover,),

            ),
            );
          }),
        ),
      ),
      );
  }
}