اصول ویجت ها در Flutter – Community

****# اصول ابزارک در فلاتر
Flutter چارچوبی است که از مفهوم ویجت به عنوان پایه UI (رابط کاربری) استفاده می کند. در Flutter ، همه چیز ویجت است ، از طرح بندی ، دکمه ها ، تا انیمیشن.
1. ویجت چیست؟
ویجت ها عناصر اصلی موجود در فلوتر هستند که نمایشگر برنامه را تشکیل می دهند. دو نوع ابزارک اصلی وجود دارد:
-
بی تاب و بیرونی: ویجت تغییر ناپذیر. یک مثال است
Text
باIcon
وتContainer
بشر -
مفتول: ویجت که هنگام اجرای برنامه می تواند تغییر کند (حالت دارد). یک مثال است
TextField
باCheckbox
وتAnimatedContainer
بشر
2. Contoh بدون تابش
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stateless Widget')),
body: Center(
child: Text('Halo, Flutter!'),
),
),
);
}
}
3. نمونه هایی از Statefulwidget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int counter = 0;
void incrementCounter() {
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stateful Widget')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: $counter', style: TextStyle(fontSize: 20)),
SizedBox(height: 20),
ElevatedButton(
onPressed: incrementCounter,
child: Text('Tambah'),
),
],
),
),
),
);
}
}
4. ابزارک های عمومی که اغلب مورد استفاده قرار می گیرند
در اینجا برخی از ابزارک های اساسی که اغلب در Flutter استفاده می شوند:
1. متن
برای نمایش متن استفاده می شود.
Text('Halo, Flutter!', style: TextStyle(fontSize: 20, color: Colors.blue))
2
ویجت های چند منظوره برای قرار دادن عناصر دیگر و می توان به رنگ ، حاشیه ، بالشتک و غیره ترتیب داد.
Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(child: Text('Kotak')),
)
ردیف و ستون
برای تنظیم طرح به صورت افقی استفاده می شود (Row
) یا عمودی (Column
).
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.star, color: Colors.yellow),
SizedBox(width: 10),
Text('Rating: 5.0')
],
)
4
دکمه هایی با اثرات ارتفاع.
ElevatedButton(
onPressed: () => print('Tombol ditekan!'),
child: Text('Klik Saya'),
)
5. تصویر
برای نمایش تصاویر از پرونده های محلی یا اینترنت استفاده می شود.
Image.asset('assets/logo.png', width: 100, height: 100)
5. نتیجه گیری
Flutter از مفهوم ویجت برای ساخت UI برنامه استفاده می کند. تفاوت بین StatelessWidget
وت StatefulWidget
و ابزارک های اساسی مختلف برای توسعه دهندگان فلاتر بسیار مهم هستند.
با استفاده از این اصول ، میمین می تواند با اعتماد به نفس بیشتر برنامه های کاربردی Flutter را شروع کند! 🚀