Skip to content

A Flutter widget that helps you select and mark geographic regions of Turkey.

License

Notifications You must be signed in to change notification settings

Tughra/Turkiye-Regional-Map-Flutter-Widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🇹🇷 Turkiye Regional Map Flutter Widget

A widget that helps you select and mark geographic regions of Turkey.

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  turkiye_regional_map: <latest version>

To use the latest changes:

  turkiye_regional_map:
    git:
      url: https://github.com/Tughra/Turkiye-Regional-Map-Flutter-Widget.git
      ref: master

❔ Usage

Import this class

import 'package:turkiye_regional_map/turkiye_regional_map.dart';

If you want to pulse animation when you select a region;

If you want to use the turkeyRegionModel parameter, you need to create the TurkeyRegionModel model outside of the TurkeyRegionalMap widget. Do not put the object directly into the parameter.
final regionModelPulse = TurkeyRegionModel(
    showIstanbulEuropeRegion: false,
    showIstanbulAnatoliaRegion: false,
    selectedWidthFactor: 3.4,
    selectedRegion: TurkeyRegionType.blackSea);
TurkeyRegionalMap.withPulseAnimation(
mapWidth: MediaQuery.sizeOf(context).width,
selectable: true,
pulseMaxRadius: 200,
turkeyRegionModel: regionModelPulse,)

If you dont want to pulse animation when you select a region use this;

final regionModelWithoutPulse = TurkeyRegionModel(
    showIstanbulEuropeRegion: true,
    mediterraneanColor: Colors.teal[100],
    easternAnatoliaColor: Colors.teal[200],
    southeasternAnatoliaColor: Colors.teal[300],
    centralAnatoliaColor: Colors.teal[400],
    blackSeaColor: Colors.teal[500],
    egeColor: Colors.teal[600],
    selectedRegionColor: Colors.teal,
    marmaraColor: Colors.teal[700],
    showIstanbulAnatoliaRegion: true,
    borderColor: Colors.white,
    selectedBorderColor: Colors.black,
    selectedWidthFactor: 3.4,
    selectedRegion: TurkeyRegionType.blackSea);
TurkeyRegionalMap.onlyMap(
mapWidth: MediaQuery.sizeOf(context).width,
selectable: true,
turkeyRegionModel: regionModelWithoutPulse,)

If you want to select Istanbul's europe or anatolia region you need to set true showIstanbulAnatoliaRegion or showIstanbulEuropeRegion inside of TurkeyRegionModel. If you do not want to initial selected region set selectedRegion:null inside of TurkeyRegionModel.

OnSelectRegionCallBack is a callback that contains hit exact position, selected region type and center position of selected region.

TurkeyRegionalMap.withPulseAnimation(
mapWidth: MediaQuery.sizeOf(context).width,
selectable: true,
selectedRegionCallback: (TurkeyRegionType type, Offset hitOffset, Offset centerRegion) {
  print(type);
  print("hitOffset $hitOffset");
  print("centerRegion $centerRegion");
},)

Full Example

class MyHomePage extends StatefulWidget {


  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final regionModelPulse = TurkeyRegionModel(
      showIstanbulEuropeRegion: false,
      showIstanbulAnatoliaRegion: false,
      selectedWidthFactor: 3.4,
      selectedRegion: TurkeyRegionType.blackSea);
  final regionModelWithoutPulse = TurkeyRegionModel(
      showIstanbulEuropeRegion: true,
      mediterraneanColor: Colors.teal[100],
      easternAnatoliaColor: Colors.teal[200],
      southeasternAnatoliaColor: Colors.teal[300],
      centralAnatoliaColor: Colors.teal[400],
      blackSeaColor: Colors.teal[500],
      egeColor: Colors.teal[600],
      selectedRegionColor: Colors.teal,
      marmaraColor: Colors.teal[700],
      showIstanbulAnatoliaRegion: true,
      borderColor: Colors.white,
      selectedBorderColor: Colors.black,
      selectedWidthFactor: 3.4,
      selectedRegion: TurkeyRegionType.blackSea);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red.shade800,
        title: Text("Turkiye Regional Map",style: TextStyle(color: Colors.white),),
      ),
      body: ListView(
        children: <Widget>[
          Center(child: Text(regionModelPulse.selectedRegion?.name??"",style: TextStyle(fontSize: 24),)),
          ColoredBox(color: Colors.blue.shade700,
            child: TurkeyRegionalMap.withPulseAnimation(
              mapWidth: MediaQuery.sizeOf(context).width,
              selectable: true,
              selectedRegionCallback: (TurkeyRegionType type, Offset hitOffset, Offset centerRegion) {
                print(type);
                print("hitOffset $hitOffset");
                print("centerRegion $centerRegion");
                setState(() {});
              },
              pulseColor: Colors.white,
              pulseMaxRadius: 200,
              turkeyRegionModel:regionModelPulse ,
            ),
          ),
          TurkeyRegionalMap.onlyMap(
            mapWidth: MediaQuery.sizeOf(context).width,
            selectable: true,
            turkeyRegionModel:regionModelWithoutPulse ,
          ),
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

🐛 Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.