nabind47 / learn_flutter

Mobile App Development Course

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    appBar: AppBar(title: const Text("Nabin Dhami")),
    body: const Column(
      children: [
        Center(child: Text("Hello World!!")),
      ],
    ),
  )));
}

Stateless Widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Nabin Dhami")),
      body: const Co
      lumn(
        children: [
          Center(child: Center(child: Text("Hello World!!"))),
        ],
      ),
    );
  }
}

Statefull Widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int score = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Nabin Dhami")),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.plus_one),
        onPressed: () {
          setState(() {
            score = score + 1;
          });
        },
      ),
      body: Column(
        children: [
          const Center(child: Center(child: Text("Hello World!!"))),
          Text(
            '$score',
          ),
        ],
      ),
    );
  }
}

Widgets and Looping around Widgets

body: Container(
  child: Column(
    children: const [
      ListTile(
        leading: Icon(Icons.computer),
        trailing: Icon(Icons.more_horiz),
        title: Text("Computer Engineering"),
        subtitle: Text("Bachelors in Computer Engineering"),
        tileColor: Colors.pink,
      ),
      Padding(
        padding: EdgeInsets.only(top: 8.0),
        child: ListTile(
          leading: Icon(Icons.computer),
          trailing: Icon(Icons.more_horiz),
          title: Text("Software Engineering"),
          subtitle: Text("Bachelors in Software Engineering"),
          tileColor: Colors.pink,
        ),
      ),
    ],
  ),
),

List View Builder

body: Container(
  child: ListView.builder(
    itemCount: 5,
    itemBuilder: (context, index) {
      return const Padding(
        padding: EdgeInsets.only(top: 8.0),
        child: ListTile(
          leading: Icon(Icons.computer),
          trailing: Icon(Icons.more_horiz),
          title: Text("Computer Engineering"),
          subtitle: Text("Bachelors in Computer Engineering"),
          tileColor: Colors.pink,
        ),
      );
    }),
),

Routing and Dynamic Routing

import 'package:flutter/material.dart';

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Settings")),
        body: Container(child: const Text("Settings Screen")));
  }
}

GestureDetector such that navigation can be applied with other widgets

body: Column(
  children: [
    IconButton(
        onPressed: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (_) => const SettingsScreen()));
        },
        icon: const Icon(Icons.settings))
  ],
),

Navigator.pushReplacement() such that we dont allow to get back

Dynamic Routing

var routes = {
  "/": (_) => const MyHomePage(title: "Home"),
  "/settings": (_) => const SettingsScreen(),
};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      initialRoute: "/",
      routes: routes,
      onUnknownRoute: (settings) =>
          MaterialPageRoute(builder: (context) => const ScreenNotFound()),
    );
  }

IconButton(onPressed: () {
  Navigator.pushNamed(context, "/settings");
}, icon: const Icon(Icons.settings))

onTap: () => Navigator.pushReplacementNamed(context, "/")

Bottom Navigation

List<Widget> screenList = [homePageScreen, const SettingsScreen()];

return Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title)
  ),
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _currIndex,
    onTap: (value) {
      setState(() {
        _currIndex = value;
      });
    },
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Settings")
  ]),
  body: screenList[_currIndex],
)

Flutter Launcher Icon