Flutter documentation

Appearance

Scaffold widget ​

Flutterda Scaffold vidjeti material dizaynga asoslangan foydalanuvchi interfeyslarini yaratish uchun asosiy qurilish blokidir. Scaffold vidjeti sahifaning umumiy tuzilmasini tuzish uchun yordam beradi.

Scaffold vidjeti bir nechta atributlarni o'z ichiga oladi.

  • appBar - ilovaning top navbari
  • body - ilovaning tanasi
  • bottomNavigationBar - ilovaning pastki navigatsiya paneli

va boshqalar.

Scaffold widget

Avvalgi darsda tuzgan dasturimizdagi Text vidjetini Scaffold ichiga olib o'tamiz.

dart
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('Salom Flutter'),
      ),
    );
  }
}
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('Salom Flutter'),
      ),
    );
  }
}

Dasturni ishga tushirsak, interfeys o'zgarganini ko'rishimiz mumkin.

Center vidjeti ​

Elementlarni markazga joylashtirish uchun Center vidjetidan foydalanamiz.

flutter-center

Center vidjeti orqali matnni markazga quyidagicha joylashtiramiz:

dart
...

return MaterialApp(
  home: Scaffold(
    body: Center(
      child: Text('Salom Flutter'),
    ),
  ),
);

...
...

return MaterialApp(
  home: Scaffold(
    body: Center(
      child: Text('Salom Flutter'),
    ),
  ),
);

...

Dasturni qayta ishga tushirsak, Salom Flutter yozuvi markazga o'tganini ko'rishimiz mumkin.