Flutter Codelab

FlutterCodelab.md

Workshop conducted on 14 December 2019 by German Saprykin

Event details: here

Lab: here

View It on DartPad: here

This gist won't have much notes, as you can read them on the lab itself. The lab did not come with the complete code so I followed it and made it available on DartPad.

Q&A

Q. How to call platform-specific code?

A. Platform Channel Mechanism shown in Link. Similar to React Native's Bridge Modules

Q. State Management in Flutter? Which is better?

A. Options for state management. I don't like Redux, it is not very scalable. I like BLoC/ Rx, Alibaba's Fish-Redux

main.dart

// Codelab based on https://flutter-codelab-7f5bf.firebaseapp.com/#7

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: RandomImages(),
      theme: ThemeData(
        primaryColor: Colors.red[300],
      ),
    );
  }
}

// Random Images here is a mini widget that is used as the body of the app.

class RandomImages extends StatefulWidget {
  @override //override the createState method
  RandomImagesState createState() => RandomImagesState();
}

class RandomImagesState extends State<RandomImages> {
  final List<String> _urls = <String>[];
  final Set<String> _saved = Set<String>();
  void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          final Iterable<ListTile> tiles = _saved.map(
            (String url) {
              return ListTile(
                title: Image.network(url, height: 250),
              );
            },
          );
          final List<Widget> divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();

          return Scaffold(
            // Add 6 lines from here...
            appBar: AppBar(
              title: Text('Saved Images'),
            ),
            body: ListView(children: divided),
          ); // ... to here.
        },
      ),
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Insta Flutter'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildImages(),
    );
  }

  Widget _buildImages() {
    return ListView.builder(
        padding: const EdgeInsets.all(16),
        itemBuilder: (BuildContext _context, int i) {
          if (i.isOdd) {
            return Divider();
          }
          final int index = i ~/ 2;
          // If you've reached the end of the available urls...
          if (index >= _urls.length) {
            _urls.addAll(List.generate(
                10,
                (number) =>
                    'https://picsum.photos/seed/${_urls.length + number + 1}/250/250'));
          }
          return _buildRow(_urls[index]);
        });
  }

  Widget _buildRow(String url) {
    final bool alreadySaved = _saved.contains(url);
    return ListTile(
        title: Image.network(url, height: 250),
        trailing: IconButton(
            icon: Icon(
              alreadySaved ? Icons.favorite : Icons.favorite_border,
              color: alreadySaved ? Colors.red : null,
            ),

        // slightly modified from the original lab, instead of the entire ListTile being clickable,
        // only the heart is clickable for saving the item.
            onPressed: () {
              setState(() {
                if (alreadySaved) {
                  _saved.remove(url);
                } else {
                  _saved.add(url);
                }
              });
            }));
  }
}