تصغير عناصر appbar اثناء scroll في فلاتر
كما نعلم ان الانميشن هيا اساس نجاح معظم التطبيقات التي تنافس في السوق ويتميز فلاتر بوجود عدد كبير جدا من المكتبات التي تساعدك في عملية تنفيذ الانميشن الخاص بك بسهوله تامه وايضا الامر لا يقتصر على المكتبات فيمكنك تصميم الانميشن الذي ترغب به بكل سهوله بدون اي تعقيدات ولكن عليك ان تكون ملم بأليه عمل الانميشن والعمليات الحسابيه وفي هذا القسم نختص معكم بمساعدتكم في تنفيذ الانميشن الذي ترغب به بكل سهوله وبدون اي تعقد تماما يمكنك من خلال مقالة اليوم ان تقوم بتصميم appbar مع وجود صورة بالاعلى بداخله وعند النزول الى الاسفل يتم تقليل حجم الappbar وايضا يتم تصغير العناصر التي توجد بداخله كما هو موضح لكم بالصورة الخاصه بالمقاله .
Flutter هو تطبيق SDK للجوّال يسمح بإنشاء رمز متزامن لنظامي التشغيل iOS و Android. تطبيقين بأداء رائع ودقة. Flutter الهدف هو إعطاء المطورين الأدوات التي يحتاجونها لإنشاء برامج عالية الأداء تعمل بسلاسة عبر العديد من الأنظمة الأساسية. يمكننا استيعاب العديد من اختلافات الأيقونات ومشكلات التنضيد وسلوك التمرير. لبدء الاستخدام ، لا تحتاج إلى أي معرفة سابقة بتطوير الأجهزة المحمولة. إذا كنت قد استخدمت لغة Java أو JavaScript ، فسيبدو التطبيق مألوفًا لك لأنه تمت كتابته بلغة برمجة Dart. على الرغم من أن الكتابة بلغات شيئية تعد ميزة إضافية ، إلا أن بعض تطبيقات Flutter قد تم إنشاؤها من قبل غير المبرمجين!
vector_math (change 360)
dependencies:
vector_math: ^2.1.2
تصميم نموذج يحتوي على البيانات المراد عرضها في التطبيق
سوف نقوم هنا بعمل نموذج يحتوي على البيانات التي سوف نقوم بملئها وهنا قمنا بعمل بيانات static وليست من سيرفر بل بيانات تم ملئها اثناء كتابة الكود .
model.dart
class Album {
Album({
this.album,
this.artist,
this.imageAlbum,
this.imageDisc,
this.description,
});
final String? album;
final String? artist;
final String? imageAlbum;
final String? imageDisc;
final String? description;
}
final currentAlbum = Album(
album: 'Title text',
artist: 'sub title text',
description: r'''
hey say to never judge a book by its cover, and while we’d like to think that the same goes for albums—it’s the music on the inside that counts—there’s something to be said for a well-designed album cover. It’s your chance to catch the attention of new listeners and give a visual representation of the music within. A great album cover can inspire someone to fish your vinyl out of the stack, encourage a streaming listener to learn more about you, and add a whole new layer of artistry to your work.
Although having an original and expressive album cover design is important, the process itself doesn’t have to be daunting. We’ve assembled a comprehensive guide to designing your album cover, from the early brainstorming stages to finding the design style that syncs perfectly with your music.
As a musician, you know that inspiration is important. Music does not just occur out of nothing; it needs to be pulled from somewhere. When it comes to song writing, you may be inspired by an event, a piece of art, an image, a sound, a feeling, etc. You can think about designing your album cover in a similar way—what is inspiring that visual representation? Perhaps you’ll think about the same inspirations that struck you in your song writing, effectively translating that musical inspiration into images.
In addition to thinking about the inspiration for your own work, it’s always helpful to think about who you admire and draw ideas from their work. What are some album covers that you are drawn to? What do you like about them? Be sure to take some notes—combined with your identity notes, these will help you narrow your design process.
Although having an original and expressive album cover design is important, the process itself doesn’t have to be daunting. We’ve assembled a comprehensive guide to designing your album cover, from the early brainstorming stages to finding the design style that syncs perfectly with your music.
Although having an original and expressive album cover design is important, the process itself doesn’t have to be daunting. We’ve assembled a comprehensive guide to designing your album cover, from the early brainstorming stages to finding the design style that syncs perfectly with your music.
Although having an original and expressive album cover design is important, the process itself doesn’t have to be daunting. We’ve assembled a comprehensive guide to designing your album cover, from the early brainstorming stages to finding the design style that syncs perfectly with your music.
''',
imageAlbum:
'https://images.unsplash.com/photo-1655635131711-f52f3fd15328?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80',
imageDisc:
'https://images.unsplash.com/photo-1656128845608-7d153603722c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
);
تصميم صفحة لعرض البيانات وتصغير عناصر الappbar اثناء scroll مع انميشن
يمكنك استخدام الكود التالي لتنفيذ الانميشن الموجود باعلى صورة المقالة بسهوله والامر غير معقد فقط كل ما سوف نحتاجه هو class اخر يكون مخصص SliverPersistentHeaderDelegate ويتم من خلاله تنفيذ الانميشن وكتابة الكود المسؤول عن الanimation وايضا قمنا بعمل كومنت لمعظم الفقرات الموجوده لكي تسهل عليكم عملية الحصول على الاكواد والتعديل عليها بكل سهوله كما هو موضح امامكم .
ui.dart
import 'package:flutter/material.dart';
import 'package:tfluttert/albom.dart';
import 'package:vector_math/vector_math.dart' as vector;
const _colorHeadrt = Color(0xffececea);
class TestPage extends StatefulWidget {
TestPage({Key? key}) : super(key: key);
@override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
// pinned = true => show appbar after scroll | pinned = false => hide appbar after scroll
SliverPersistentHeader(
delegate: MyVinylDiscHeader(),
pinned: true,
),
SliverToBoxAdapter(
child: Container(
padding: const EdgeInsets.all(20.0),
child: Text(currentAlbum.description!),
),
)
],
));
}
}
const maxHeaderExtent = 300.0;
const minHeaderExtent = 100.0;
const maxImageSize = 150.0;
const minImageSize = 60.0;
const leftMarginDisc = 150.0;
const maxTitleSize = 25.0;
const maxSubTitleSize = 18.0;
const minTitleSize = 16.0;
const minSubTitleSize = 13.0;
class MyVinylDiscHeader extends SliverPersistentHeaderDelegate {
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
// shrinkOffset is size Header from 100 to 350 scroll .
final percent = shrinkOffset / maxHeaderExtent;
// percent complete scroll 1.0 before 0.8 - 0.6 ...
print (percent);
final size = MediaQuery.of(context).size;
final currentImage = (maxImageSize*(1-percent)).clamp(minImageSize, maxImageSize);
final titleSize = (maxTitleSize * (1-percent)).clamp(minTitleSize, maxTitleSize);
final subTitleSize = (maxSubTitleSize * (1-percent)).clamp(minSubTitleSize, maxSubTitleSize);
final maxSizeMargin = size.width/2.8;
// space text after scroll
const textMovement = 10.0;
final leftTextMargin = maxSizeMargin + (textMovement*percent);
return Container(
color: _colorHeadrt,
child: Stack(
children: [
Positioned(
height: maxImageSize,
left: leftTextMargin,
top: 45.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
currentAlbum.album!,
// letterSpacing (far or near the letters)
style: TextStyle(fontWeight: FontWeight.bold ,
fontSize:titleSize
,letterSpacing: -0.5),
),
Text(
textAlign: TextAlign.center,
currentAlbum.artist!,
style: TextStyle(fontSize: subTitleSize,letterSpacing: -0.5,color: Colors.grey),
),
],
)
),
// sub image
Positioned(
height: currentImage,
left: (leftMarginDisc * (1-percent)).clamp(33.0, 150),
bottom: 12.0,
child:
Transform.rotate(
angle: vector.radians(360 * percent),
child: Image.network(
currentAlbum.imageDisc!,
// fit: BoxFit.fitHeight,
),
),
),
// main image
Positioned(
height: currentImage,
left: 25.0,
bottom: 12.0,
child: Image.network(
currentAlbum.imageAlbum!,
// fit: BoxFit.cover,
)),
],
),
);
}
@override
// max header before scroll
double get maxExtent => maxHeaderExtent;
@override
// min header after scroll
double get minExtent => minHeaderExtent;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
false;
}
android sdk manager تحميل flutter developers applications create app android android studio mac
