flutter 3.7.5 Issue on web html rendering

Question

We are trying to upgrade our e-commerce site with multi language English and Arabic interface, but the right to left RTL text direction got missed up in web HTML rendering with Flutter 3.7

How to solve this issue? we are super excited to work on the new version of #flutter

for example:

• correct expected output: 23.5
• wrong web html rendering result: 5.23

Another example:

• correct expected output: (test) (هذا نص تجريبي (اختبار
• wrong web html rendering result: )test() هذا نص تجريبي )اختبار

we have tried this code sample, but it was not working

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

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const HomePage(),
   );
 }
}

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Column(
       children: const [
         Directionality(
           textDirection: TextDirection.rtl,
           child: Text(
             'سعر المنتج 23.5 دولار',
             style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
           ),
         ),
         SizedBox(height: 20),
         Directionality(
           textDirection: TextDirection.rtl,
           child: Text(
             '(test) (هذا نص تجريبي (اختبار',
             style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
           ),
         ),
       ],
     ),
   );
 }
}

is there a way to fix this?

Answer 1

Your column has problem.

I fixed his problem by CrossAxisAlignment.stretch for cover width of screen and MainAxisAlignment.start for start side .

If using Directionality as parent of widget and set rtl , start side always is Right .

import 'package:flutter/material.dart';
void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const HomePage(),
   );
 }
}

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Directionality(
       textDirection: TextDirection.rtl,
       child:Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               mainAxisAlignment: MainAxisAlignment.start,
       children: const [
          Text(
             'سعر المنتج 23.5 دولار',
             style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
           ),
         SizedBox(height: 20),
          Text(
             '(test) (هذا نص تجريبي (اختبار',
             style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
           ),
       ],
     ),)
   );
 }
}