Arabic text not connected when specifying stroke width - flutter

Arabic text is not connected when I specify a stroke width. Here's what I see:
The connections within the circled portion shouldn't be there, but instead each character should be connected, like in cursive text. Here's the code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Text.rich(TextSpan(
text: 'كيف الحال',
style: TextStyle(
fontSize: 80,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = Colors.blue))));
}
}
If I use PaintingStyle.fill instead of PaintingStyle.stroke above, I don't see any issue because the text is filled in.
How can I get rid of these connections? Is there a way to merge paths?

If you stack another Text widget that just colors the text, then the connections between two letters is hidden:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
Text('كيف الحال',
style: TextStyle(
fontSize: 80,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = Colors.blue)),
Text('كيف الحال',
style: TextStyle(
fontSize: 80,
color: Colors.white,
))
],
));
}
}
You must stack because Flutter only allows specifying one of color/foreground/background.
If the color has transparency, then the connections are shown. So my question isn't fully addressed, but I don't need transparency.

Related

keyboard is not showing when auto focus is true in flutter textfield

When I restart this code in Visual Studio autofocus is working as well as keyboard is showing. When I close the visual studio and re open the app in android emulator the keyboard is not showing but auto focus is working (Cursor is showing).
But its work in android 5 perfectly.
My code:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: TextField(
autofocus: true,
)
),
);
}
}
Can anyone fix this? Thank you.
Try the following code:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final FocusNode focusNode = FocusNode();
#override
void initState() {
super.initState();
focusNode.requestFocus();
}
#override
void dispose() {
focusNode.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: TextField(
focusNode: focusNode,
autofocus: true,
),
),
);
}
}

I am trying to change the theme of my flutter application, but it still seems to display the default theme

Code for application is as following
class MyApp extends StatelessWidget {
const MyApp({Key? key}): super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.green,
)
);
}
}
Need to change primaryColor, textTheme, scaffoldBackgroundColor.

How to stop ListView from scrolling automatically in Flutter?

Very trivial problem.
Super simple code.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return ListView(
children: [
Container(color: Colors.red, height: 1000),
Container(color: Colors.blue, height: 1000),
],
);
}
}
It keeps snapping to the item instead of scrolling organically; any ideas?
There seems to be a scrollbug bug with Flutter + iOS Simulator 14.4.
Logged a bug with Flutter here:
https://github.com/flutter/flutter/issues/79641

trying to make call from IOS

I'm trying to use url_launcher so that through a button it takes me to the dialer of my phone to make a call. In android it works perfectly but when I run it in IOS it does not work, it does nothing, I don't know if something is missing in the code, I appreciate your help
This is the code I am using:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final String _phoneNumber = '318654378';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: RaisedButton(
child: Text('Call Number'),
onPressed: () {
if (Platform.isAndroid) {
// _callNumber();
launch('tel://$_phoneNumber');
} else if (Platform.isIOS) {
launch('tel://$_phoneNumber');
}
}),
),
);
}
}
Any idea what is going on

How do I make Scaffold.bottomSheet partly transparent?

Is there a way to make Scaffold.bottomSheet partly transparent (like for a notch that shows the body content behind it)? I noticed that even adding just Text implicitly puts a white background (Material?) below it, and I think this is not configurable.
class MyHomePage extends StatefulWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: // ...
),
bottomSheet: Text('This is a bottom sheet'),
);
}
}
FWIW, Scaffold.bottomNavigationBar supports being semi-transparent (e.g. you can have a notch around FAB).
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
theme: ThemeData(
bottomSheetTheme: BottomSheetThemeData(
backgroundColor: Colors.black.withOpacity(0.5)),
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text(widget.title),
),
body: Center(),
bottomSheet: Container(
height: 40,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('semi transparent bottom sheet :)', style: TextStyle(color: Colors.white),))
),
);
}
}
this was previously posted