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 ਅਤੇ ਕਈ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ।

ਟੈਕਸਟ ਸਟਾਈਲ ਦੀਆਂ ਆਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ(ਟੈਕਸਟ ਵਿਜੇਟ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ):

  • 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 ਤੱਤਾਂ ਜਿਵੇਂ ਕਿ ਰੰਗ, ਫੌਂਟ, ਟੈਕਸਟ ਆਕਾਰ ਆਦਿ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦੇ ਹੋ।