स्पंदन: AppBar की ऊंचाई निर्धारित करना

Question 1

मैं केवल AppBarस्पंदन की ऊंचाई कैसे निर्धारित कर सकता हूं ?

बार का शीर्षक लंबवत (उस में AppBar) केंद्रित होना चाहिए ।

Question 2

आप PreferredSize का उपयोग कर सकते हैं :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

Question 3

आप इसका उपयोग कर सकते हैं PreferredSizeऔर इसके flexibleSpaceलिए:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

इस तरह से आप इसकी छाया को दृष्टिगत रखने elevationके AppBarलिए रख सकते हैं और कस्टम ऊँचाई रख सकते हैं , जो कि मैं बस ढूंढ रहा था। आपको रिक्ति सेट करना है SomeWidget, यद्यपि।

Question 4

इसे लिखते समय, मुझे इसकी जानकारी नहीं थी PreferredSize। इसे हासिल करने के लिए सिनेन का जवाब बेहतर है।

आप एक कस्टम ऊंचाई के साथ अपना खुद का कस्टम विजेट बना सकते हैं:

import "package:flutter/material.dart";

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(children : <Widget>[new CustomAppBar("Custom App Bar"), new Container()],);
  }
}


class CustomAppBar extends StatelessWidget {

  final String title;
  final double barHeight = 50.0; // change this for different heights 

  CustomAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    final double statusbarHeight = MediaQuery
        .of(context)
        .padding
        .top;

    return new Container(
      padding: new EdgeInsets.only(top: statusbarHeight),
      height: statusbarHeight + barHeight,
      child: new Center(
        child: new Text(
          title,
          style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Question 5

@ Cinn के जवाब के अलावा, आप इस तरह एक वर्ग को परिभाषित कर सकते हैं

class MyAppBar extends AppBar with PreferredSizeWidget {
  @override
  get preferredSize => Size.fromHeight(50);

  MyAppBar({Key key, Widget title}) : super(
    key: key,
    title: title,
    // maybe other AppBar properties
  );
}

या इस तरह से

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // maybe other AppBar properties
    ),
  );
}

और फिर मानक एक के बजाय इसका उपयोग करें

Question 6

Cinn का जवाब बहुत अच्छा है, लेकिन इसमें एक बात गलत है।

PreferredSizeविजेट, स्थिति पट्टी के लिए लेखांकन के बिना, स्क्रीन के शीर्ष पर तुरंत शुरू कर देंगे तो उसकी ऊंचाई से कुछ स्थिति पट्टी की ऊंचाई द्वारा आच्छादित कर दिया जाएगा। यह भी पक्ष notches के लिए खाता है।

समाधान : preferredSizeएक के साथ बच्चे को लपेटोSafeArea

appBar: PreferredSize(
  //Here is the preferred height.
  preferredSize: Size.fromHeight(50.0),
  child: SafeArea(
    child: AppBar(
      flexibleSpace: ...
    ),
  ),
),

यदि आप लचीले स्थान की संपत्ति का उपयोग नहीं करना चाहते हैं, तो उस सब की कोई आवश्यकता नहीं है, क्योंकि AppBarवसीयत के अन्य गुण स्टेटस बार के लिए स्वचालित रूप से खाते हैं।

Question 7

आप टूलबार की टूलबार संपत्ति का उपयोग कर सकते हैं, यह वही करता है जो आप चाहते हैं।

Question 8

उपयोग करें `toolbarHeight`:

अब उपयोग करने की आवश्यकता नहीं है PreferredSize। के toolbarHeightसाथ प्रयोग करें flexibleSpace।

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)

Question 9

यदि आप विज़ुअल कोड में हैं, तो Ctrl + AppBar फ़ंक्शन पर क्लिक करें ।

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

और इस टुकड़े को संपादित करें।

app_bar.dart will open and you can find 
    preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

ऊँचाई का अंतर!

नमूना छवि

स्पंदन: AppBar की ऊंचाई निर्धारित करना

उपयोग करें toolbarHeight:

उपयोग करें `toolbarHeight`: