Scaffold ਦੇ ਨਾਲ ਅਤੇ AppBar ਅੰਦਰ UI ਬਣਾਉਣਾ Flutter

ਵਿੱਚ, ਤੁਸੀਂ ਅਤੇ ਵਿਜੇਟਸ ਦੀ Flutter ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਪਰ ਸ਼ਕਤੀਸ਼ਾਲੀ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾ ਸਕਦੇ ਹੋ । ਐਪ ਬਾਰ, ਐਪ ਬਾਡੀ, ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਬਟਨਾਂ ਵਰਗੇ ਆਮ ਤੱਤਾਂ ਨਾਲ ਇੱਕ ਐਪ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਦਾ ਇੱਕ ਹਿੱਸਾ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਐਪ ਸਿਰਲੇਖ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਵਿਕਲਪ ਸ਼ਾਮਲ ਹਨ। Scaffold AppBar Scaffold AppBar Scaffold

ਹੇਠਾਂ ਇੱਕ ਗਾਈਡ ਹੈ ਕਿ ਇਸਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ Scaffold ਅਤੇ AppBar:

Flutter ਇੱਕ ਨਵੀਂ ਐਪ ਬਣਾਓ

ਪਹਿਲਾਂ, Flutter ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ ਇੱਕ ਨਵਾਂ ਐਪ ਬਣਾਓ terminal:

flutter create app_name

( app_name ਆਪਣੇ ਐਪ ਦੇ ਲੋੜੀਂਦੇ ਨਾਮ ਨਾਲ ਬਦਲੋ)

main.dart ਫਾਈਲ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰੋ

main.dart ਫਾਈਲ ਵਿੱਚ(ਲਿਬ ਫੋਲਡਰ ਦੇ ਅੰਦਰ), ਸਮੱਗਰੀ ਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਨਾਲ ਬਦਲੋ:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}  

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ Scaffold ਅਤੇ ਨਾਲ ਇੱਕ ਐਪ ਬਣਾਉਂਦੇ ਹਾਂ AppBar । ਇਸ ਵਿੱਚ ਸੰਪੱਤੀ ਨੂੰ ਪਾਸ ਕੀਤਾ ਗਿਆ ਅਤੇ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਾਡੀ Scaffold ਸ਼ਾਮਲ ਹੈ । AppBar body

ਐਪ ਚਲਾਓ

ਅੰਤ ਵਿੱਚ, ਐਪ ਨੂੰ ਚਲਾਉਣ ਲਈ, ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ terminal:

flutter run

Flutter ਤੁਹਾਡੀ ਐਪ ਐਪ ਬਾਰ 'ਤੇ " ਐਪ ਵਿਦ Scaffold ਅਤੇ " ਸਿਰਲੇਖ ਵਾਲੀ ਇੱਕ ਸਕ੍ਰੀਨ ਅਤੇ  ਸਕ੍ਰੀਨ ਦੇ ਕੇਂਦਰ ਵਿੱਚ AppBar ਟੈਕਸਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ। Hello, world!

ਸਿੱਟਾ: Scaffold ਅਤੇ AppBar ਇਹ ਦੋ ਜ਼ਰੂਰੀ ਵਿਜੇਟਸ ਹਨ Flutter ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ ਸਧਾਰਨ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਐਪ ਬਾਰ ਅਤੇ ਐਪ ਬਾਡੀ ਵਰਗੇ ਬੁਨਿਆਦੀ UI ਭਾਗਾਂ ਨਾਲ ਆਕਰਸ਼ਕ ਐਪਸ ਬਣਾ ਸਕਦੇ ਹੋ।