বিড়বিড়: অ্যাপবারের উচ্চতা নির্ধারণ করা

Question 1

আমি কীভাবে সহজভাবে AppBarফ্লুরগুলিতে উচ্চতা নির্ধারণ করতে পারি ?

বারের শিরোনামটি উল্লম্বভাবে কেন্দ্রে থাকা উচিত (এতে AppBar)।

Question 2

আপনি পছন্দসই আকার ব্যবহার করতে পারেন :

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

@ সিনের উত্তর ছাড়াও, আপনি এর মতো শ্রেণি সংজ্ঞায়িত করতে পারেন

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

সিনের উত্তর দুর্দান্ত, তবে এটিতে একটি জিনিস ভুল আছে।

PreferredSizeউইজেট, স্ট্যাটাস বার হিসাববিদ্যা ছাড়াই স্ক্রীনের উপরের অংশে অবিলম্বে শুরু হবে যাতে তার উচ্চতার কিছু স্ট্যাটাস বার উচ্চতা দ্বারা ছায়াবৃত্ত করা হবে না। এটি পার্শ্ব notches জন্য অ্যাকাউন্ট।

সমাধান : preferredSizeএকটি এর সাথে সন্তানের আবরণSafeArea

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

আপনি যদি নমনীয় স্পেস সম্পত্তিটি ব্যবহার করতে না চান, তবে সেই সমস্ত কিছুর দরকার নেই, কারণ উইলের অন্যান্য বৈশিষ্ট্যগুলি AppBarস্থিতি দণ্ডের জন্য স্বয়ংক্রিয়ভাবে অ্যাকাউন্ট হয়ে যাবে।

Question 7

আপনি যদি ভিজ্যুয়াল কোডটিতে থাকেন তবে অ্যাপবার ফাংশনে Ctrl + ক্লিক করুন।

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)),

উচ্চতার পার্থক্য!

নমুনা চিত্র