list map in flutter code example

Example 1: flutter List> example

//flutter List<Map<String, Object>> example
// this is a simple example to show how you can use a List
// with a number of widgets, ideally you should split your classes into 
// separate files in order to trim down you Widget Tree.
import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget{

    
    Widget build(BuildContext context){
        return MaterialApp(
            title: 'Hello Phrases',
            home: _MyHomePage(),
        );
    }
}

class _MyHomePage extends StatefulWidget{


_MyHomePageState createState() => _MyHomePageState(); 

}


class _MyHomePageState extends State<_MyHomePage> {

    int phraseCount = 0;

    final List<Map<String, Object>> myPhraseList = [
        {'phrase': 'Phrase 1 some interesting phrase'},
        {'phrase': 'Phrase 2 and yet another interesting phrase'}
    ];

    void nextPhrase(){
        setState((){
            phraseCount += 1;
        });
    }

    void resetPhrase(){
        setState((){
            phraseCount = 0;
        });
    }

    
    Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
            title: Text('The Quote App'), 
        ),
        body: Container(
            padding: EdgeInsets.all(20.0),
            child: phraseCount < myPhraseList.length ?  PhraseLogic(nextPhrase: nextPhrase, myPhraseList: myPhraseList, phraseCount: phraseCount) : ResetPhrase(resetPhrase: resetPhrase),
    ),
        );
}
}

class PhraseLogic extends StatelessWidget {
    final List<Map<String, Object>> myPhraseList;
    final int phraseCount;
    final Function nextPhrase;

    PhraseLogic({this.nextPhrase, this.phraseCount, this.myPhraseList});

  
  Widget build(BuildContext context) {
    return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
                Text(myPhraseList[phraseCount]['phrase']),
                SizedBox(height: 20.0),
                  RaisedButton(
                    child: Text('Next Phrase'),
                    onPressed: nextPhrase,
                ),
                
            ],
        );
  }
}


class ResetPhrase extends StatelessWidget {
final Function resetPhrase;

ResetPhrase({this.resetPhrase});

  
  Widget build(BuildContext context) {
    return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
                Text('All done!!!'),
                SizedBox(height: 20.0),
                  RaisedButton(
                    child: Text('Reset Phrase'),
                    onPressed: resetPhrase,
                ),
                
            ],
        );
  }
}

Example 2: flutter map

Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      center: LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    layers: [
      TileLayerOptions(
        urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        subdomains: ['a', 'b', 'c']
      ),
      MarkerLayerOptions(
        markers: [
          Marker(
            width: 80.0,
            height: 80.0,
            point: LatLng(51.5, -0.09),
            builder: (ctx) =>
            Container(
              child: FlutterLogo(),
            ),
          ),
        ],
      ),
    ],
  );
}

Tags:

Dart Example