Flutter smoke dev maps

Smoke Test App with maps

maps smoke app

Screencasts

  1. tc74 Create nomnom:

    flutter create nomnom
flutter run

  2. tc87 Codebase clear comments lib/main.dart and change name on line 13

  3. tc188 Remove boilderplate layout and add “Hello World”:

    body: new Center( child: new Text('hello world') ),

  4. tc211 Take out _incrementCounter

  5. tc229 Create dummy test data for list view:

    List<String> _places = <String>[];

@override
initState() {
  super.initState();
  _places = new List.generate(100, (i) => 'Restauant $i');

  6. tc324 Put list in view:

    body: new Center(
  child: new ListView(
    children: _places.map((place) => Text (place)).toList(),
  )),

  7. tc401 Add google places API:

    cp ../src/places.dart ./lib/
cp ../src/key.dart ./lib/

  8. tc519 Open pubspec.yaml add to line 8:

    http: ^0.11.3

  9. tc586 Run command line:

    dart lib/places.dart

  10. tc628 Parse json in a nice way (code is commented out in places.dart file)into streams.

  11. tc761 Return stream to flutter app by using:

    Future<Stream<Place>>

  12. tc800 In file lib/main.dart make function:

    import 'places.dart';
...
  List<Place> _places = <Place>[];
...
@override
initState() {
  super.initState();
  listenForPlaces();
}
...
listenForPlaces() async {
  var stream = await getPlaces(33.9850, -118.4695);
  stream.listen( (place) =>
    setState[ () => _places.add(place))
  );
}
...
    children: _places.map((place) => new Text(place.name)).toList(),
...

  13. tc984 Should get a ‘non-pretty’ list

  14. tc1000 Make it pretty

  15. tc1009 In main.dart add new widget PlaceWidget:

    class PlaceWidget extends StatelessWidget {
  final Place _place;
  PlaceWidget(this._place);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new ListTile(
      title: new Text(_place.name),
    ); // ListTile
  }
}

  16. tc1048 Override the build widget:

    children: _places.map((place) => new PlaceWidget(place)).toList(),

  17. tc1116 Add subtitle:

    class PlaceWidget extends StatelessWidget {
  final Place _place;
  PlaceWidget(this._place);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new ListTile(
      title: new Text(_place.name),
      subtitle: new Text(_place.address),
    ); // ListTile
  }
}

  18. tc1138 Add leading:

    class PlaceWidget extends StatelessWidget {
  final Place _place;
  PlaceWidget(this._place);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new ListTile(
      leading: new CircleAvatar(
        child: new Text(_place.rating.toString()),
        backgroundColor: Colors.green,
      ), // CircleAvatar
      title: new Text(_place.name),
      subtitle: new Text(_place.address),
    ); // ListTile
  }
}

  19. tc1197: Update backgroundColor based on Rating using interpolation:

    class PlaceWidget extends StatelessWidget {
  final Place _place;
  PlaceWidget(this._place);

  Color getColor(double rating) {
    return Color.lerp(Colors.red, Colors.green, rating/5);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new ListTile(
      leading: new CircleAvatar(
        child: new Text(_place.rating.toString()),
        backgroundColor: getColor(_place.rating),
      ), // CircleAvatar
      title: new Text(_place.name),
      subtitle: new Text(_place.address),
    ); // ListTile
  }
}

  20. tc1293 Put in Swipe Right to Like, Left to Remove using Dismissible:

    class PlaceWidget extends StatelessWidget {
  final Place _place;
  PlaceWidget(this._place);

  Color getColor(double rating) {
    return Color.lerp(Colors.red, Colors.green, rating/5);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Dismissible(
      key: new Key(_place.name),
      background: new Container(color: Colors.green),
      secondaryBackground: new Container(color: Colors.red),
      leading: new CircleAvatar(
        child: new Text(_place.rating.toString()),
        backgroundColor: getColor(_place.rating),
      ), // CircleAvatar
      title: new Text(_place.name),
      subtitle: new Text(_place.address),
    ); // ListTile
  }
}

  21. tc1415 Add text to swipe feedback:

    onDismissed: (direction) {
  direction == DismissDirection.endToStart ? Scaffold.of(context).showSnackBar(
    new SnackBar(content: new Text('I Like'))) : print('No Like');
},

  22. tc1609 Show some of the render debugging performance.

References