I creating custom marker on google map and found that the letters are upside down.

But the problem is that this symptom is only on android emulator and some Chinese mobile phones (such as oppo vivo xiaomi).

The ones that are tested and do not have the problem are ios emulator, iphone, samsung.

The code for testing is below.

import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyPage());
  }
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Map<String, Marker> markers = <String, Marker>{};

  _onMapCreate(GoogleMapController controller) async {
    markers['test2'] = Marker(
      markerId: const MarkerId('test'),
      zIndex: 8,
      icon: await iconMarker(),
      position: const LatLng(14.0, 101.0),
    );

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      markers: Set<Marker>.of(markers.values),
      initialCameraPosition: const CameraPosition(target: LatLng(14.7, 100.7), zoom: 5),
      onMapCreated: _onMapCreate,
    );
  }
}

Future<BitmapDescriptor> iconMarker() async {
  ui.PictureRecorder recorder = ui.PictureRecorder();
  Canvas canvas = Canvas(recorder);

  canvas.drawRect(const Rect.fromLTWH(0, 0, 300, 100), Paint()..color = Colors.orange);

  TextSpan title = const TextSpan(style: TextStyle(fontSize: 70), text: "Thailand");

  TextPainter(text: title, textDirection: TextDirection.ltr)
    ..layout()
    ..paint(canvas, const Offset(10, 10));

  ui.Picture p = recorder.endRecording();
  ByteData? pngBytes = await (await p.toImage(300, 100)).toByteData(format: ui.ImageByteFormat.png);
  Uint8List data = Uint8List.view(pngBytes!.buffer);

  return BitmapDescriptor.fromBytes(data);
}

When tested and run on emulator, the result is like this.

But if try to run it on samsung, the result will be like this.

I don't know when this happened, but it happened after I brought up an old project that had not been edited for about 2-3 months to continue working on. Before that, it was displayed correctly as usual.

dependencies:

• Flutter version 3.29.0
• Dart version 3.7.0
• google_maps_flutter: 2.10.1 (I tested from 2.5.3 - 2.10.1, the same result)
• label_marker: 1.0.1 (I tested with this library, it was upside down too)

Connected device

• SM A145F (mobile) • RF8W60371NA • android-arm64 • Android 14 (API 34)
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 15 (API 35) (emulator)

I creating custom marker on google map and found that the letters are upside down.

But the problem is that this symptom is only on android emulator and some Chinese mobile phones (such as oppo vivo xiaomi).

The ones that are tested and do not have the problem are ios emulator, iphone, samsung.

The code for testing is below.

import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyPage());
  }
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Map<String, Marker> markers = <String, Marker>{};

  _onMapCreate(GoogleMapController controller) async {
    markers['test2'] = Marker(
      markerId: const MarkerId('test'),
      zIndex: 8,
      icon: await iconMarker(),
      position: const LatLng(14.0, 101.0),
    );

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      markers: Set<Marker>.of(markers.values),
      initialCameraPosition: const CameraPosition(target: LatLng(14.7, 100.7), zoom: 5),
      onMapCreated: _onMapCreate,
    );
  }
}

Future<BitmapDescriptor> iconMarker() async {
  ui.PictureRecorder recorder = ui.PictureRecorder();
  Canvas canvas = Canvas(recorder);

  canvas.drawRect(const Rect.fromLTWH(0, 0, 300, 100), Paint()..color = Colors.orange);

  TextSpan title = const TextSpan(style: TextStyle(fontSize: 70), text: "Thailand");

  TextPainter(text: title, textDirection: TextDirection.ltr)
    ..layout()
    ..paint(canvas, const Offset(10, 10));

  ui.Picture p = recorder.endRecording();
  ByteData? pngBytes = await (await p.toImage(300, 100)).toByteData(format: ui.ImageByteFormat.png);
  Uint8List data = Uint8List.view(pngBytes!.buffer);

  return BitmapDescriptor.fromBytes(data);
}

When tested and run on emulator, the result is like this.

But if try to run it on samsung, the result will be like this.

I don't know when this happened, but it happened after I brought up an old project that had not been edited for about 2-3 months to continue working on. Before that, it was displayed correctly as usual.

dependencies:

• Flutter version 3.29.0
• Dart version 3.7.0
• google_maps_flutter: 2.10.1 (I tested from 2.5.3 - 2.10.1, the same result)
• label_marker: 1.0.1 (I tested with this library, it was upside down too)

Connected device

• SM A145F (mobile) • RF8W60371NA • android-arm64 • Android 14 (API 34)
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 15 (API 35) (emulator)

• android
• flutter
• google-maps
• android-emulator

Share Improve this question Follow asked Mar 11 at 6:24 EK LYEK LY 5511 silver badge66 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I am facing the exact same issue. Some users reported having their markers flipped upside down.

1. Upgrade Flutter to the Latest Version

flutter upgrade 

This updates Flutter SDK to the latest stable release.

---

2. Update google_maps_flutter to the Latest Version

• Open your pubspec.yaml

• Find the line for google_maps_flutter and update it like this:

yaml

dependencies: google_maps_flutter: ^2.12.1

• Then run:

flutter pub get

---

3. Clean and Rebuild the Project

flutter clean 
flutter pub get 

---

4. Build the Release APK or App Bundle

flutter build apk --release

or if you're building an app bundle:

flutter build appbundle --release

---

5. Install and Test the Release App

• Install the generated release APK on a device where the upside-down icon issue was appearing.