اضافة الصورة فوق النص او فوق صورة اخرى في Flutter
في هذا المقال نقدم لكم شرح لكيفية اضافة صورة فوق النص او حتى صورة فوق صورة كما هو موضح بالصورة الخاصه بالمقال وهذه الطريقة تحسن بشكل كبير من التصميم الخاص بك وتجعله مختلف وتضيف له لمسه مختلفه عن باقي التطبيقات بمعنى يمكنك اضافة ستايل جديد للنص الذي تقوم بكتابته في flutter او حتى تقوم بادراج صورة فوق صورة لتظهر بالشكل الموجود في غلاف المقاله والحصول على شكل نهائي جديد وجميل مع تنسيق رائع .
How to add image above text in Flutter project
في البداية يمكنك القيام بالتصميم بدون الحاجه الى اي مكتبات خارجية وكل هذا يكون من خلال الاكواد التاليه يمكنك استعمالها حتى تتمكن من تنفيذ التصميم بكل سهوله وهذا عباره عن النص يمكنك استبدال النص بصورة فلا مشكلة ف كلا الطرق تعمل بدون مشاكل وهنا لدينا متغير باسم img عباره عن صورة من الانترنت وهذه ما نقوم باستعمالها في التطبيق الخاص بنا وايضا يمكنك ادراج اي صورة اخرى ترغب بها او حتى ادراج اي صورة من داخل المحرر وليس من الانترنت فقط .
txt.dart
class _ScrollSmothState extends State<ScrollSmooth> {
String img = 'https://images.unsplash.com/photo-1564860924912-f27764fd2ab6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80';
@override
Widget build(BuildContext context) {
return BlocBuilder<MainBlocCubit, MainBlocState>(
builder: (context, state) {
return Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MaskedImage(
image: NetworkImage(img),
child: Text('Test',style: TextStyle(
fontSize: 180,
fontFamily: 'WorkSans-Black',
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor
),
)
),
],
),
),
);
},
);
}
}
class MaskedImage extends StatelessWidget {
const MaskedImage({Key? key,required this.image,required this.child}) : super(key: key);
final ImageProvider image;
final Widget child;
@override
Widget build(BuildContext context) {
return FutureBuilder<ui.Image>(
future: loadImage(),
builder: (context, snapshot) => snapshot.hasData
? ShaderMask(
blendMode: BlendMode.srcATop,
shaderCallback: (bounds) => ImageShader(
snapshot.data!,
TileMode.clamp,
TileMode.clamp,
Matrix4.identity().storage
),
child: child,
)
: Container(),
);
}
Future<ui.Image> loadImage() async {
final completer = Completer<ui.Image>();
final imageStream = image.resolve(ImageConfiguration());
imageStream.addListener(ImageStreamListener((image, _) {
completer.complete(image.image);
}));
return completer.future;
}
}
How to add image above image in Flutter project
نفس الطريقة السابقة ولكن بمكتبة يمكنك استعمالها للحصول على نفس النتيجه السابقه بدون مشاكل , وكل هذا يكون من خلال المكتبة التاليه يمكنك استعمالها وادراج العنصر سواء نص او صورة وبعدها الصورة التي تريد وضعها فوقها كما هو موضح بالمثال التالي .
add package:
img.dart
WidgetMask(
blendMode: BlendMode.srcATop,
childSaveLayer: true,
mask: Image.network(img,fit: BoxFit.cover,),
child: Image.asset('assets/tyy.png',width: 350,)
),
