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 ફાઇલમાં(lib ફોલ્ડરની અંદર), સામગ્રીને નીચેના સાથે બદલો:

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 તમારી એપ એપ બાર પર " App with Scaffold અને " શીર્ષક સાથે સ્ક્રીન અને  સ્ક્રીનની મધ્યમાં AppBar ટેક્સ્ટ પ્રદર્શિત કરશે. Hello, world!

નિષ્કર્ષ: Scaffold અને AppBar તે બે આવશ્યક વિજેટ્સ છે Flutter જે તમને સરળ અને કાર્યાત્મક વપરાશકર્તા ઇન્ટરફેસ બનાવવામાં મદદ કરે છે. તેનો ઉપયોગ કરીને, તમે એપ્લિકેશન બાર અને એપ્લિકેશન બોડી જેવા મૂળભૂત UI ઘટકો સાથે આકર્ષક એપ્લિકેશનો બનાવી શકો છો.