কীভাবে একটি অ্যাপবারের শিরোনামটি কেন্দ্র করে

Question

আমি একটি অ্যাপ বারে শিরোনাম পাঠ্যটিকে কেন্দ্র করে দেখার চেষ্টা করছি যার মধ্যে নেতৃস্থানীয় এবং পিছনে ক্রিয়া রয়েছে।

@override
Widget build(BuildContext context) {
  final menuButton = new PopupMenuButton<int>(
    onSelected: (int i) {},
    itemBuilder: (BuildContext ctx) {},
    child: new Icon(
      Icons.dashboard,
    ),
  );

  return new Scaffold(
    appBar: new AppBar(
      // Here we take the value from the MyHomePage object that
      // was created by the App.build method, and use it to set
      // our appbar title.
      title: new Text(widget.title, textAlign: TextAlign.center),
      leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
      ),
      actions: [
        menuButton,
      ],
    ),
    body: new Center(
      child: new Text(
        'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

এই ছবিতে যেমন শিরোনামটি বামদিকে প্রান্তিক করা ব্যতীত এটি ভাল কাজ করে:

আমি শিরোনামটিকে কেন্দ্রে অন্তর্ভুক্ত করার চেষ্টা করার সাথে সাথে মনে হচ্ছে এটি বাম দিকে খুব বেশি:

@override
Widget build(BuildContext context) {
  final menuButton = new PopupMenuButton<int>(
    onSelected: (int i) {},
    itemBuilder: (BuildContext ctx) {},
    child: new Icon(
      Icons.dashboard,
    ),
  );

  return new Scaffold(
    appBar: new AppBar(
      // Here we take the value from the MyHomePage object that
      // was created by the App.build method, and use it to set
      // our appbar title.
      title: new Center(child: new Text(widget.title, textAlign: TextAlign.center)),
      leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
      ),
      actions: [
        menuButton,
      ],
    ),
    body: new Center(
      child: new Text(
        'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

2 আইকনগুলির মধ্যে শিরোনাম পাঠ্য পুরোপুরি কেন্দ্রীভূত করার জন্য আমি একটি সমাধান পছন্দ করব।

Answer 1

শিরোনামটি কেন্দ্র করে নেওয়া আইওএস-এ ডিফল্ট। অ্যান্ড্রয়েডে, AppBarশিরোনামটি বাম-প্রান্তিকের চেয়ে পূর্বনির্ধারিত হয়েছে তবে আপনি centerTitle: trueএটি AppBarনির্মাণকারীর পক্ষে যুক্তি হিসাবে অগ্রাহ্য করতে পারেন ।

উদাহরণ:

AppBar(
  centerTitle: true, // this is all you need
  ...
)

Comments

এক্ষেত্রে শিরোনামটি ঠিক কেন্দ্রে প্রদর্শিত হবে না: /

এটি আমার জন্য শিরোনামের প্রান্তিককরণকেও প্রভাবিত করে না।

— মাইকেল তোলসমা

Answer 2

আমার একই সমস্যা ছিল এবং অবশেষে যখন আমি আমার রো উইজেটে
মেইনএক্সিসাইজ: মেইনএক্সিসিজ.মিন যোগ করেছিলাম তখন এটি কাজ করেছিল । আশা করি এটা কাজে লাগবে!

 return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that
        // was created by the App.build method, and use it to set
        // our appbar title.
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              widget.title,
            ),
          ],
        ),

        leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
        ),
        actions: [
          menuButton,
        ],
      ),
    );
  }

Answer 3

আমার ক্ষেত্রে আমি একটি পাঠ্যের পরিবর্তে একটি লোগো / চিত্রটি কেন্দ্র করে রাখতে চেয়েছিলাম। এই ক্ষেত্রে, centerTitleযথেষ্ট নয় (কেন জানি না, আমার কাছে একটি এসভিজি ফাইল রয়েছে, সম্ভবত এটিই কারণ ...), উদাহরণস্বরূপ, এটি:

appBar: AppBar(centerTitle: true, title: AppImages.logoSvg)

চিত্রটি সত্যই কেন্দ্র করে না (প্লাস চিত্রটি আরও বড় হতে পারে ইত্যাদি)। আমার পক্ষে যা ভাল কাজ করে তা এই জাতীয় কোড:

appBar: AppBar(centerTitle: true,
    title: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 35, maxWidth: 200),
        child: AppImages.logoSvg)),

Comments

গৃহীত উত্তর পাঠ্যের জন্য কাজ করে তবে এটি কাস্টম উইজেটগুলির সঠিক উত্তর। ধন্যবাদ!

— sfratini

আমার জন্য কাজ! দেখে মনে হচ্ছে যে সরঞ্জামদণ্ডে অ্যাকশন থাকলে সেন্টারটাইটেল সঠিকভাবে কাজ করে না। এই এক এটি স্থির।

— মতি বার্তভ

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

— rgisi

Answer 4

আমি এখানে আমার অ্যাপবারে কীভাবে সেন্টারটাইটেল তৈরি করব:

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: new AppBar(
    centerTitle: true ,
    title: new Text("Login"),
  ),
  body: new Container(
    padding: EdgeInsets.all(18.0),
      key: formkey,
        child: ListView(
        children: buildInputs() + buildSubmitButton(),
      ),
   ) 
);
}

Answer 5

অনেকগুলি সমাধানের চেষ্টা করার পরে এটি আমাকে @ কলিন জ্যাকসনের উত্তর centerTitle: true ছাড়াও নমুনা কোড যুক্ত করতে সহায়তা করেছে

উদাহরণ মধ্যেbuild(BuildContext context)

এটা কর

appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),centerTitle: true
      ),

Comments

কিছুক্ষণ হয়ে গেছে, এটি সমস্যার সমাধান করেছে। খুব সহজ. ধন্যবাদ.

— রবিমারণ

Answer 6

আপনি যদি একটি কাস্টম অ্যাপ বার শিরোনাম তৈরি করতে চান তবে এখানে একটি ভিন্ন পদ্ধতির কথা। উদাহরণস্বরূপ আপনি অ্যাপ বারের কেন্দ্রে একটি চিত্র এবং একটি পাঠ্য চান তারপরে যুক্ত করুন

appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.your_app_icon,
                color: Colors.green[500],
              ),
              Container(
                  padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
            ],

          ),
  )

এখানে আমরা একটি তৈরি করেছেন Rowসঙ্গে MainAxisAlignment.centerকেন্দ্রে শিশুদের হয়েছে। তারপরে আমরা দুটি শিশু যুক্ত করেছি - একটি আইকন এবং একটি Containerপাঠ্য সহ। আমি প্রয়োজনীয় প্যাডিং যুক্ত করতে Textউইজেটটি জড়াল Container।

Answer 7

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Title'),
            actions: <Widget> [
               IconButton(icon: const Icon(Icons.file_upload), onPressed: _pressed),
            ],
            leading: IconButton(icon: const Icon(Icons.list), onPressed: _pressed),
            centerTitle: true,
        )
        body: Text("Content"),
    );
}

Answer 8

এটি সেন্টারে অ্যাপবার শিরোনাম পাঠ্য তৈরি করতে সহায়তা করতে পারে। আপনি স্টাইল ব্যবহার করে আপনার পছন্দসই স্টাইল যুক্ত করতে বা প্রয়োজন না হলে মন্তব্য করতে পারেন choose

appBar: AppBar(
          title:  const Center(
            child: Text(
              "App Title",
              style: TextStyle( color: Colors.white,fontSize: 20),
            ),
          ),
        ),

অ্যাপ্লিকেশন প্রদর্শন:

Answer 9

ব্যবহার করে আপনি দ্বারা একটি appBar শিরোনাম কেন্দ্রীভূত করতে পারে centerTitle প্যারামিটার।

সেন্টারটাইটল হ'ল বুলিয়ান ডেটাটাইপ , এবং ডিফল্ট মানটি মিথ্যা।

কেন্দ্রশালা : সত্য

উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Title'),
          backgroundColor: Colors.red,
          centerTitle: true,
        ),
      ),
    ),
  );
}

Answer 10

অ্যাপবার: অ্যাপবার (কেন্দ্রের শিরোনাম: সত্য, শিরোনাম: পাঠ্য ("হেল্লো"))

Answer 11

Centerঅবজেক্ট ব্যবহার করুন

    appBar: AppBar(
      title: Center(
        child: const Text('Title Centered')
      )
    )

Comments

এটি কাজ করে না, কারণ এটি এর মতো হওয়ার কথা নয়।

— দানিয়াল আহমেদ

Answer 12

appBar: AppBar(
    mainAxisAlignment: MainAxisAlignment.center,
)