Row And Column Map Use In Flutter

Row And Column Map Use In Flutter :

This flutter tutorial post is Row And Column Map Use In Flutter

Row(<br>
     children: <br>
              _statistics.map((Map data) {  }).toList())<br>
   );

Row Map Screenshot :

row_map_main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Row Map'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Map<String, dynamic>> _statistics = [
    {'key': 'Flutter Tutorial', 'value': 130},
    {'key': 'Android Tutorial', 'value': 3, 'border': true},
    {'key': 'Java Tutorial', 'value': 5}
  ];

  Border _border(bool border) {
    if (border != null) {
      return Border(
          left:
              BorderSide(width: 1.0, color: Colors.blue),
          right: BorderSide(
              width: 1.0, color: Colors.blue));
    }
    return Border();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          height: 60,
          margin: EdgeInsets.only(top: 26.0),
          padding: EdgeInsets.symmetric(vertical: 10.0),
          decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.1),
              borderRadius: BorderRadius.all(Radius.circular(2.0))),
          child: Row(
              children: _statistics.map((Map<String, dynamic> data) {
            return Expanded(
                child: Container(
              decoration: BoxDecoration(border: _border(data['border'])),
              child: Column(
                children: <Widget>[
                  Text(
                    data['value'].toString(),
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold),
                  ),
                  Text(
                    data['key'],
                    style: TextStyle(
                        color: Colors.black45,
                        fontSize: 12.0,
                        fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ));
          }).toList()),
        ));
  }
}

Column Map Screenshot :

column_map_main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Column Map'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Map<String, dynamic>> _statistics = [
    {'key': 'Flutter Tutorial', 'value': 130},
    {'key': 'Android Tutorial', 'value': 3},
    {'key': 'Java Tutorial', 'value': 5}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: _statistics.map((Map<String, dynamic> data) {
            return Column(children: <Widget>[
              ListTile(
                contentPadding:
                    EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
                title: Text(
                  data['key'],
                  style: TextStyle(color: Colors.black),
                ),
                trailing: Icon(Icons.keyboard_arrow_right),
                onTap: () {},
              ),
            ]);
          }).toList(),
        ));
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in