lets_eat

A new Flutter project

Flutter Cookbook Contents

This cookbook contains recipes that demonstrate how to solve common problems while writing Flutter apps

Each recipe is self-contained and can be used as a reference to help you build up an application

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Networking & http

• JSON and serialization

Navigation & Multi-Screen Apps

Navigation in flutter is like stacking/layering screens

Named route navigation docs

Named route navigation example

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Named Routes Demo',
      // Start the app with the "/" named route. In this case, the app starts
      // on the FirstScreen widget.
      initialRoute: '/',
      routes: {
        // When navigating to the "/" route, build the FirstScreen widget.
        '/': (context) => const FirstScreen(),
        // When navigating to the "/second" route, build the SecondScreen widget.
        '/second': (context) => const SecondScreen(),
      },
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          // Within the `FirstScreen` widget
          onPressed: () {
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second');
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          // Within the SecondScreen widget
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

Managing Screen stacks

Tab Bar

Side Drawer

"Transparent Image Placeholder package"

State Management

The above approach is complex and verbose since the onToggleFavorite is being passed on to multiple widgets and screen layers

"Riverpod package" for cross widget state management

flutter pub add flutter_riverpod

The below info-graphic shows the different approach when using riverpod

Riverpod has a central Provider which provides a dynamic value and also methods to change the value

Then in the respective widgets that require this dynamic value one can create a Consumer

In a Consumer Widget one can listen to or trigger changes to the dynamic value by using the methods provided by the Provider

BLoc / Rx

• Architect your Flutter project using BLOC pattern
• BLoC library state management
• Reactive programming - practical use cases

BLoC Pattern It is a state management system for Flutter recommended by Google developers

It helps in managing state and make access to data from a central place in your project

One can co-relate this architecture to ones such as MVC or MVVM whereby the third part of both is replaced by *BLoC

Hence BLoC is the controller here

In general terms, data will be flowing from the BLOC to the UI or from UI to the BLOC in the form of streams

Explicit and Implicit animations

An explicit animation is controlled by the programmer and is a bit complex

An implicit animation is controlled by flutter and is a lot less complex

Flutter pre-built Animation and Motion widgets