CODEWITHSUNDEEP
flutter
user14451514
user14451514

Reputation:

How to make floatingActionButton: SpeedDial right-to-left (RTL) in flutter with changing the application language

I am trying to change the location of the SpeedDial icon while changing the application language, but it does not work. If normal floatingActionButton is used without SpeedDial, the location is changed successfully.Attached image showing normal use of floatingActionButton:

enter image description here

But if SpeedDial is used, it will look like this:

enter image description here

I need to change the location of the SpeedDial icon while changing the Arabic language to the left.

enter image description here

I don’t know what the problem is. Now it does not respond to the change of language.

   return MaterialApp(
        localizationsDelegates:EasyLocalization.of(context).delegates,
        supportedLocales: EasyLocalization.of(context).supportedLocales,
        locale: EasyLocalization.of(context).locale,
)

full code:




import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';





void main() {
  runApp(
    EasyLocalization(
      saveLocale: true,
      supportedLocales: [
        Locale('en', 'US'),
        Locale('ar', 'SA')],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: SecondScreens(),

    ),

  );

}

class SecondScreens extends StatefulWidget {

  @override
  mainStates createState() => new mainStates();
}

class mainStates extends State<SecondScreens> {


  @override
  Widget build(BuildContext context) {

    {
      return MaterialApp(
        localizationsDelegates:EasyLocalization.of(context).delegates,
        supportedLocales: EasyLocalization.of(context).supportedLocales,
        locale: EasyLocalization.of(context).locale,

        home: Scaffold(
          floatingActionButton:
               SpeedDial(
            animatedIcon: AnimatedIcons.menu_close,
            shape: CircleBorder(),
            children: [
              SpeedDialChild(
                  child: Icon(Icons.edit),
                  backgroundColor: const Color(0xFFf6c626),
                  label: 'Edit',
                  ),
            ],
          ),


        ),

      );

    }
  }
}

Upvotes: 0

Views: 1450

Answers (2)

orket developer
orket developer

Reputation: 21

Add floatingActionButtonLocation:FloatingActionButtonLocation.startFloat,property in the scaffold.

Upvotes: 1

Payam Asefi
Payam Asefi

Reputation: 2757

You can wrap your Scaffold in Directionality and check if language is rtl then mirror the screen, something like this:

Directionality(
  textDirection: (context.locale=='ar')?TextDirection.rtl:TextDirection.ltr,
  child: Scaffold(
    floatingActionButton:
    SpeedDial(
      animatedIcon: AnimatedIcons.menu_close,
      shape: CircleBorder(),
      children: [
        SpeedDialChild(
          child: Icon(Icons.edit),
          backgroundColor: const Color(0xFFf6c626),
          label: 'Edit',
        ),
      ],
    ),
    
  ),
);

Upvotes: 1

Related Questions