close

UI સાથે ફોર્મેટિંગ ThemeData અને કસ્ટમ Styles ઇન Flutter

માં Flutter, તમે ઉપયોગ કરીને તમારી એપ્લિકેશનના દેખાવ અને અનુભૂતિને ફોર્મેટ કરી શકો છો ThemeData અને કસ્ટમાઇઝ કરી શકો છો styles. એ એક વર્ગ છે જે સમગ્ર એપ્લિકેશન માટે ThemeData પ્રભાવશાળી રંગ styles, ફોન્ટ્સ, વગેરેને વ્યાખ્યાયિત કરવા માટે ગુણધર્મો ધરાવે છે. padding કસ્ટમ શૈલી તમને styles દરેક ચોક્કસ માટે કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે Widget. આમાં કેવી રીતે ઉપયોગ કરવો ThemeData અને કસ્ટમાઇઝ કરવું તે અંગેની વિગતવાર સૂચનાઓ અહીં છે: Styles Flutter

ThemeData

માં Flutter, ThemeData એ એક વર્ગ છે જેમાં પ્રાથમિક રંગ, ફોન્ટ પરિવાર, padding અને સમગ્ર એપ્લિકેશન માટે ઘણા અન્ય સ્ટાઇલ વિકલ્પોને વ્યાખ્યાયિત કરવા માટે વિશેષતાઓ શામેલ છે. નો ઉપયોગ કરીને ThemeData, તમે દરેક વ્યક્તિને સંશોધિત કર્યા વિના તમારી એપ્લિકેશનના એકંદર દેખાવને ઝડપથી બદલી શકો છો Widget.

ના સામાન્ય લક્ષણો ThemeData:

  • primaryColor: એપ્લિકેશનના મુખ્ય ઘટકો માટે પ્રાથમિક રંગ, જેમ કે એપ્લિકેશન બાર, બટનો, વગેરે.
  • accentColor: UI માં ગૌણ ઘટકો અથવા હાઇલાઇટ્સ માટે ઉચ્ચાર રંગ, જેમ કે FloatingActionButton.
  • backgroundColor: સમગ્ર એપ્લિકેશન માટે પૃષ્ઠભૂમિ રંગ.
  • textTheme styles: એપ્લિકેશનમાં વિવિધ ટેક્સ્ટ ઘટકો માટે પ્રાથમિક ટેક્સ્ટને વ્યાખ્યાયિત કરે છે, જેમ કે હેડિંગ, મુખ્ય ટેક્સ્ટ, વગેરે.
  • textTheme.headline1: મથાળા સ્તર 1 માટે ટેક્સ્ટ શૈલી.
  • textTheme.headline2: મથાળા સ્તર 2 માટે ટેક્સ્ટ શૈલી.
  • textTheme.bodyText1: મુખ્ય મુખ્ય ટેક્સ્ટ માટે ટેક્સ્ટ શૈલી.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

કસ્ટમ શૈલી

કસ્ટમ Styles તમને દરેક ચોક્કસ માટે શૈલીને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે Widget. ટેક્સ્ટ, કન્ટેનર, રાઇઝ્ડ બટન, વગેરે જેવા વિજેટ્સની વિશેષતાનો ઉપયોગ કરીને style, તમે ફોન્ટ, રંગ, ટેક્સ્ટનું કદ, padding અને અન્ય વિવિધ વિશેષતાઓ બદલી શકો છો.

TextStyle ના સામાન્ય લક્ષણો(ટેક્સ્ટ વિજેટ માટે વપરાયેલ):

  • fontSize: ફોન્ટનું કદ.
  • fontWeight: ફોન્ટ વજન.
  • color: ટેક્સ્ટનો રંગ.
  • fontStyle: ફોન્ટ શૈલી, જેમ કે બોલ્ડ, ઇટાલિક.
  • letterSpacing: અક્ષરો વચ્ચેનું અંતર.
  • wordSpacing: શબ્દો વચ્ચેનું અંતર.
  • decoration: ટેક્સ્ટ ડેકોરેશન, જેમ કે અન્ડરલાઇન, સ્ટ્રાઇક-થ્રુ.

કસ્ટમનો ઉપયોગ કરીને ઉદાહરણ Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

ઉપયોગ કરીને Themes અને Styles સાથે MediaQuery

તમે સ્ક્રીનના કદ અથવા ઉપકરણ રિઝોલ્યુશનના આધારે UI ને સમાયોજિત કરવા માટે Themes અને Styles સાથે જોડી શકો છો. MediaQuery

ઉદાહરણ:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

નિષ્કર્ષ:

Flutter તમારી એપ્લિકેશનના UI ને ફોર્મેટ કરવા માટે શક્તિશાળી સાધનો પ્રદાન કરે છે. નો ઉપયોગ કરીને ThemeData અને કસ્ટમાઇઝ કરીને Styles, તમે તમારી એપ્લિકેશન માટે સુંદર અને આકર્ષક ઇન્ટરફેસ બનાવવા માટે UI ઘટકો જેમ કે રંગો, ફોન્ટ્સ, ટેક્સ્ટ કદ વગેરેને સરળતાથી સમાયોજિત કરી શકો છો.