🏟️ 🧝 👩‍👩‍👧 [डॉक द्वारा] स्पंदन। भाग 4. वेब डेवलपर्स के लिए 👩🏼‍🎤 👨‍👩‍👧‍👧 👩🏾‍⚕️

हम प्रश्न-उत्तर प्रारूप में आधिकारिक स्पंदन प्रलेखन की एक और व्याख्या के साथ नए सप्ताह की शुरुआत करते हैं । भाग 4 में वेब डेवलपर्स के लिए स्पंदन की तुलनात्मक शैली शामिल है। यह पूरी तरह से लेआउट के लिए समर्पित है और पिछले वाले की तरह बड़ा नहीं हुआ है। परंपरागत रूप से, मैं फ़्लटर में रुचि रखने वाले सभी वेब डेवलपर्स को बिल्ली के नीचे देखने की सलाह देता हूं कि यह देखने लायक है कि क्या यह इस ढांचे की कोशिश करने के लायक है और इसमें कितना प्रयास होगा।

यदि यहां पर्याप्त जानकारी नहीं है या यदि आपके पास एक विशिष्ट मंच के लिए देशी विकास का अनुभव है, तो मैं अन्य भागों में देखने की सलाह देता हूं:

स्पंदन। भाग 1. Android डेवलपर्स के लिए
स्पंदन। भाग 2. iOS डेवलपर्स के लिए
स्पंदन। भाग 3. प्रतिक्रियाशील मूल
स्पंदन डेवलपर्स के लिए । भाग 4. स्पंदन वेब डेवलपर्स के लिए
। भाग 5. ज़ामरीन के लिए

सामग्री:

मूल लेआउट

सवाल:

कैसे शैली और पाठ संरेखित करें?

उत्तर:

TextStyle का उपयोग करना ।

उदाहरण:

HTML / सीएसएस

<div class="greybox">
    Lorem ipsum
</div>

.greybox {
      background-color: #e0e0e0; /* grey 300 */
      width: 320px;
      height: 240px;
      font: 900 24px Georgia;
    }

स्पंदन

var container = Container( // grey box
  child: Text(
    "Lorem ipsum",
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.w900,
      fontFamily: "Georgia",
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल:

बैकग्राउंड कलर कैसे सेट किया जाता है?

उत्तर

BoxDecoration वर्ग का उपयोग करना ।

मतभेद

background-colorCSS में एक प्रॉपर्टी केवल बैकग्राउंड कलर के लिए जिम्मेदार है। BoxDecoration गुणों की एक विस्तृत श्रृंखला के लिए जिम्मेदार है, जैसे कि गोल कोनों, किनारा, आदि।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  Lorem ipsum
</div>

.greybox {
      background-color: #e0e0e0;  /* grey 300 */
      width: 320px;
      height: 240px;
      font: 900 24px Roboto;
    }

स्पंदन

var container = Container( // grey box
  child: Text(
    "Lorem ipsum",
    style: bold24Roboto,
  ),
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
);

सवाल:

घटकों को कैसे केंद्र करें?

उत्तर

केंद्र विजेट का उपयोग करना ।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  Lorem ipsum
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center; 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Text(
      "Lorem ipsum",
      style: bold24Roboto,
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल:

कंटेनर की चौड़ाई कैसे सेट करें?

उत्तर

संपत्ति का उपयोग करना width।

मतभेद

स्पंदन विगेट्स एक widthनिश्चित संपत्ति है । कॉन्फ़िगर maxWidthया करने के minWidthलिए, BoxConstraints विजेट का उपयोग करें ।

उदाहरण:

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px; 
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  width: 100%;
  max-width: 240px; 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: EdgeInsets.all(16),
      width: 240, //max-width is 240
    ),
  ),
  width: 320, 
  height: 240,
  color: Colors.grey[300],
);

पद और आकार

सवाल

पूर्ण स्थिति कैसे स्थापित करें?

उत्तर

Stack विजेट के अंदर स्थिति विजेट का उपयोग करना ।

अतिरिक्त जानकारी

डिफ़ॉल्ट रूप से, विजेट माता-पिता विजेट के अंदर स्थित होते हैं।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  position: relative; 
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  position: absolute;
  top: 24px;
  left: 24px; 
}

स्पंदन

var container = Container( // grey box
  child: Stack(
    children: [
      Positioned( // red box
        child: Container(
          child: Text(
            "Lorem ipsum",
            style: bold24Roboto,
          ),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          padding: EdgeInsets.all(16),
        ),
        left: 24,
        top: 24,
      ),
    ],
  ), 
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल

घटकों के रोटेशन को कैसे सेट करें?

उत्तर

ट्रांसफॉर्म विजेट का उपयोग करना ।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  transform: rotate(15deg); 
}

स्पंदन

var container = Container( // gray box
  child: Center(
    child: Transform(
      child: Container( // red box
        child: Text(
          "Lorem ipsum",
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        padding: EdgeInsets.all(16),
      ),
      alignment: Alignment.center,
      transform: Matrix4.identity()
        ..rotateZ(15 * 3.1415927 / 180),
    ), 
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल

घटकों को स्केल कैसे करें?

उत्तर

ट्रांसफॉर्म विजेट का उपयोग करना ।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  transform: scale(1.5); 
}

स्पंदन

var container = Container( // gray box
  child: Center(
    child: Transform(
      child: Container( // red box
        child: Text(
          "Lorem ipsum",
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        padding: EdgeInsets.all(16),
      ),
      alignment: Alignment.center,
      transform: Matrix4.identity()
        ..scale(1.5),
     ), 
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल

एक ढाल कैसे लागू करें?

उत्तर

BoxDecoration वर्ग और उसके गुणों का उपयोग करना gradient।

उदाहरण

HTML / CSS वर्टिकल लीनियर ग्रेडिएंट

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  padding: 16px;
  color: #ffffff;
  background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(0.0, -1.0),
          end: const Alignment(0.0, 0.6),
          colors: <Color>[
            const Color(0xffef5350),
            const Color(0x00ef5350)
          ],
        ),
      ), 
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

HTML / CSS क्षैतिज रैखिक ढाल

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  padding: 16px;
  color: #ffffff;
  background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%); 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(-1.0, 0.0),
          end: const Alignment(0.6, 0.0),
          colors: <Color>[
            const Color(0xffef5350),
            const Color(0x00ef5350)
          ],
        ),
      ), 
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

फार्म

सवाल

कोनों को गोल कैसे करें?

उत्तर

BoxDecoration वर्ग और उसके गुणों का उपयोग करना borderRadius।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* gray 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  border-radius: 8px; 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red circle
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: BoxDecoration(
        color: Colors.red[400],
        borderRadius: BorderRadius.all(
          const Radius.circular(8),
        ), 
      ),
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल

छाया कैसे जोड़ें?

उत्तर

BoxShadow वर्ग का उपयोग करना ।

अतिरिक्त जानकारी

BoxShadow का उपयोग BoxDecorationboxShadow वर्ग की संपत्ति के हिस्से के रूप में किया जाता है ।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
              0 6px 20px rgba(0, 0, 0, 0.5);
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
      ),
      decoration: BoxDecoration(
        color: Colors.red[400],
        boxShadow: [
          BoxShadow (
            color: const Color(0xcc000000),
            offset: Offset(0, 2),
            blurRadius: 4,
          ),
          BoxShadow (
            color: const Color(0x80000000),
            offset: Offset(0, 6),
            blurRadius: 20,
          ),
        ], 
      ),
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  margin: EdgeInsets.only(bottom: 16),
);

सवाल

गोल और अण्डाकार आकार कैसे बनाएं?

उत्तर

BoxShapeenum वर्ग का उपयोग करना ।

अतिरिक्त जानकारी

BoxShape का उपयोग BoxDecoration वर्ग की आकृति संपत्ति के हिस्से के रूप में किया जाता है ।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redcircle">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* gray 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redcircle {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  text-align: center;
  width: 160px;
  height: 160px;
  border-radius: 50%; 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red circle
      child: Text(
        "Lorem ipsum",
        style: bold24Roboto,
        textAlign: TextAlign.center, 
      ),
      decoration: BoxDecoration(
        color: Colors.red[400],
        shape: BoxShape.circle, 
      ),
      padding: EdgeInsets.all(16),
      width: 160,
      height: 160, 
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

टेक्स्ट

सवाल

पाठ के बीच की दूरी को कैसे समायोजित करें?

उत्तर

TextStyle वर्ग और इसके गुणों का उपयोग करना letterSpacingऔर wordSpacing।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  letter-spacing: 4px; 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum",
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.w900,
          letterSpacing: 4, 
        ),
      ),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल

पाठ का हिस्सा कैसे प्रारूपित करें?

उत्तर

का उपयोग करते हुए RichText विजेट और TextSpan वर्ग ।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem <em>ipsum</em> 
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
}
 .redbox em {
  font: 300 48px Roboto;
  font-style: italic;
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: RichText(
        text: TextSpan(
          style: bold24Roboto,
          children: <TextSpan>[
            TextSpan(text: "Lorem "),
            TextSpan(
              text: "ipsum",
              style: TextStyle(
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48,
              ),
            ),
          ],
        ),
      ), 
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

सवाल

लंबे पाठ के प्रदर्शन को कैसे सीमित करें?

उत्तर

विगेट्स maxLinesऔर टेक्स्टoverflow विजेट की मदद से ।

उदाहरण

HTML / सीएसएस

<div class="greybox">
  <div class="redbox">
    Lorem ipsum dolor sit amet, consec etur
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

स्पंदन

var container = Container( // grey box
  child: Center(
    child: Container( // red box
      child: Text(
        "Lorem ipsum dolor sit amet, consec etur",
        style: bold24Roboto,
        overflow: TextOverflow.ellipsis,
        maxLines: 1, 
      ),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: EdgeInsets.all(16),
    ),
  ),
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

दिसंबर 2019 के अंत में, फ़्लटर 1.12 की रिलीज़ के साथ, वेब समर्थन बीटा में चला गया! और यह बहुत अच्छी खबर है, जिसका अर्थ है कि निकट भविष्य में हम तेजी से फ्लटर में लिखी गई वेबसाइटों को देखेंगे। इसलिए, यदि आप अभी भी विचार में हैं, तो मैं इस रूपरेखा को आज़माने की सलाह देता हूं और मुझे उम्मीद है कि मेरा लेख उपयोगी था। और आज के लिए बस इतना ही। Google आपके Chrome को नहीं तोड़ सकता है!

[डॉक द्वारा] स्पंदन। भाग 4. वेब डेवलपर्स के लिए

सामग्री:

मूल लेआउट

सवाल:

उत्तर:

उदाहरण:

सवाल:

उत्तर

मतभेद

उदाहरण

सवाल:

उत्तर

उदाहरण

सवाल:

उत्तर

मतभेद

उदाहरण:

पद और आकार

सवाल

उत्तर

अतिरिक्त जानकारी

उदाहरण

सवाल

उत्तर

उदाहरण

सवाल

उत्तर

उदाहरण

सवाल

उत्तर

उदाहरण

फार्म

सवाल

उत्तर

उदाहरण

सवाल

उत्तर

अतिरिक्त जानकारी

उदाहरण

सवाल

उत्तर

अतिरिक्त जानकारी

उदाहरण

टेक्स्ट

सवाल

उत्तर

उदाहरण

सवाल

उत्तर

उदाहरण

सवाल

उत्तर

उदाहरण

More articles: