Title features in Flutter maps

22 Dec 2020 / 23 minutes to read

This section helps to learn about how to add title in the maps and customize them.

Title text

You can define the maps title using SfMaps.title property. You can set the text for the title using the MapsTitle.text property.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
       child: Container(
         height: 350,
         child: Padding(
           padding: EdgeInsets.only(left: 15, right: 15),
           child: SfMaps(
             title: MapTitle('World Map'),
             layers: [
               MapShapeLayer(
                 source: dataSource,
               ),
             ],
           ),
         ),
       ),
     )
   );
}

Text style

You can change the style of the title text in the maps using the MapsTitle.textStyle property.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
       child: Container(
         height: 350,
         child: Padding(
           padding: EdgeInsets.only(left: 15, right: 15),
           child: SfMaps(
             title: MapTitle(
               'World Map',
               textStyle: const TextStyle(
                  color: Colors.red,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                  fontFamily: 'Times',
               ),
             ),
             layers: [
               MapShapeLayer(
                 source: dataSource,
               ),
             ],
           ),
         ),
       ),
     )
   );
}

Using SfMapsTheme

You can also change the style of the title text in the maps using the SfMapsThemeData.titleTextStyle property.

NOTE

You must import the theme.dart library from the Core package to use SfMapsTheme.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
        height: 350,
        child: Padding(
          padding: EdgeInsets.only(left: 15, right: 15),
          child: SfMapsTheme(
            data: SfMapsThemeData(
              titleTextStyle: const TextStyle(
                color: Colors.red,
                fontSize: 16,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                fontFamily: 'Times'),
              ),
            child: SfMaps(
              title: MapTitle('World Map'),
              layers: [
                 MapShapeLayer(source: dataSource),
               ],
            ),
          ),
        ),
      ),
    ),
  );
}

Text alignment

You can align the title text in the maps using the MapsTitle.alignment property. By default, the alignment will be center. You can also align the text in the available alignment options in Alignment.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
       child: Container(
         height: 350,
         child: Padding(
           padding: EdgeInsets.only(left: 15, right: 15),
           child: SfMaps(
             title: MapTitle(
               'World Map',
               textStyle: const TextStyle(
                  color: Colors.red,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                  fontFamily: 'Times',
               ),
               alignment: Alignment.centerLeft,
             ),
             layers: [
               MapShapeLayer(
                 source: dataSource,
               ),
             ],
           ),
         ),
       ),
     )
   );
}

Background color

You can change the background color of the title in the maps using the MapsTitle.color.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
       child: Container(
         height: 350,
         child: Padding(
           padding: EdgeInsets.only(left: 15, right: 15),
           child: SfMaps(
             title: MapTitle(
               'World Map',
               textStyle: const TextStyle(
                  color: Colors.red,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                  fontFamily: 'Times',
               ),
               color: Colors.lightBlueAccent,
             ),
             layers: [
               MapShapeLayer(
                 source: dataSource,
               ),
             ],
           ),
         ),
       ),
     )
   );
}

Decoration

You can decorate the title of maps using the MapsTitle.decoration property. You can use BoxDecoration, ShapeDecoration or create a custom Decoration.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 350,
          child: Padding(
            padding: EdgeInsets.only(left: 15, right: 15),
            child: SfMaps(
              title: MapTitle(
                'World Map',
                textStyle: const TextStyle(
                    color: Colors.red,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                    fontFamily: 'Times'
                ),
                decoration: BoxDecoration(
                  color: Colors.lightBlueAccent,
                  border: Border.all(color: Colors.red, width: 2),
                  borderRadius: const BorderRadius.all(Radius.circular(4)),
                  shape: BoxShape.rectangle,
                ),
              ),
              layers: [
                MapShapeLayer(
                  source: dataSource,
                ),
              ],
            ),
          ),
        ),
      ),
   );
}

Margin

You can add margin to the maps title using the MapsTitle.margin property.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 350,
          child: Padding(
            padding: EdgeInsets.only(left: 15, right: 15),
            child: SfMaps(
              title: MapTitle(
                'World Map',
                textStyle: const TextStyle(
                    color: Colors.red,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                    fontFamily: 'Times'
                ),
                margin: const EdgeInsets.only(top: 50),
                decoration: BoxDecoration(
                  color: Colors.lightBlueAccent,
                  border: Border.all(color: Colors.red, width: 2),
                  borderRadius: const BorderRadius.all(Radius.circular(4)),
                  shape: BoxShape.rectangle,
                ),
              ),
              layers: [
                MapShapeLayer(
                  source: dataSource,
                ),
              ],
            ),
          ),
        ),
      ),
   );
}

Padding

You can add padding to the maps title using the MapsTitle.padding property.

dart

MapShapeSource dataSource;

@override
void initState() {
  dataSource = MapShapeSource.asset(
    "assets/world_map.json",
    shapeDataField: "continent",
  );
  super.initState();
}

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 350,
          child: Padding(
            padding: EdgeInsets.only(left: 15, right: 15),
            child: SfMaps(
              title: MapTitle(
                'World Map',
                textStyle: const TextStyle(
                    color: Colors.red,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                    fontFamily: 'Times'
                ),
                margin: const EdgeInsets.all(10),
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: Colors.lightBlueAccent,
                  border: Border.all(color: Colors.red, width: 2),
                  borderRadius: const BorderRadius.all(Radius.circular(4)),
                  shape: BoxShape.rectangle,
                ),
              ),
              layers: [
                MapShapeLayer(
                  source: dataSource,
                ),
              ],
            ),
          ),
        ),
      ),
   );
}