應用欄行 alignment 在 flutter

Question

在我的應用程序的應用欄中，我包含了一個抽屜和其他圖標，但抽屜圖標和其他元素之間有一個空格，我希望圖標更靠近抽屜圖標。 這就是我現在所擁有的：

這就是我想要的樣子：

這是我的代碼：

import 'package:custigrow/Utilities/expiry_information_card.dart';
import 'package:custigrow/Utilities/my_cards.dart';
import 'package:custigrow/Utilities/product_information_card.dart';
import 'package:custigrow/Utilities/sales_information_card.dart';
import 'package:custigrow/Utilities/transactions_card.dart';
import 'package:custigrow/screens/authenticate/sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:custigrow/Utilities/side_menu.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final user = FirebaseAuth.instance.currentUser;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        drawer: SideMenu(),
        backgroundColor: Color(0xFFE5E5E5),
        appBar: AppBar(
          iconTheme: IconThemeData(color: Colors.black),
          toolbarHeight: 70,
          elevation: 0.0,
          backgroundColor: Color(0xFFE5E5E5),
          title: Row(
            children: [
              Row(
                children: [
                  Container(
                      padding: EdgeInsets.zero,
                      height: 50,
                      width: 80,
                      child: Image.asset("lib/assets/custigrow.png")),
                ],
              ),
              Row(
                children: [
                  Icon(
                    Icons.inbox_outlined,
                    color: Colors.grey[600],
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Icon(Icons.notifications_active_outlined,
                      color: Colors.grey[600]),
                  SizedBox(
                    width: 20,
                  ),
                  CircleAvatar(
                    child: Container(
                      child: Icon(
                        Icons.person,
                        color: Colors.grey,
                      ),
                    ),
                    backgroundColor: Colors.grey[300],
                  ),
                ],
              )
            ],
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
          child: SingleChildScrollView(
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Dashboard",
                    style: TextStyle(fontSize: 35, letterSpacing: 0.2),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(8, 10, 15, 10),
                      child: Icon(
                        Icons.history,
                        size: 30,
                        color: Colors.green,
                      ),
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.green, width: 2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  )
                ],
              ),
              Row(
                children: [
                  Text(
                    "How are you today?",
                    style: TextStyle(fontSize: 18),
                  ),
                  Image.asset(
                    "lib/assets/goodbye.png",
                    height: 20,
                  ),
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                height: 140,
                child: PageView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                        title: "Revenue",
                        rate: 0,
                        icon: "lib/assets/moneyrounded.png",
                        balance: 0,
                        color: Colors.green,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                          title: "Total Orders",
                          rate: 0,
                          icon: "lib/assets/clipboard2.png",
                          balance: 0,
                          color: Colors.blue),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: MyCards(
                          title: "Total Products",
                          rate: 0,
                          icon: "lib/assets/box.png",
                          balance: 0,
                          color: Colors.orange),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 30,
              ),
              //sales info card
              SalesInfo(),
              SizedBox(
                height: 50,
              ),
              //product info card
              ProductInfo(),
              SizedBox(
                height: 50,
              ),

              //expiry info card
              ExpiryInfo(),
              SizedBox(
                height: 50,
              ),

              //transaction card
              TransactionsCard(),
              SizedBox(
                height: 30,
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

在我的應用程序的應用欄中，我包含了一個抽屜和其他圖標，但抽屜圖標和其他元素之間有一個空格，我希望圖標更靠近抽屜圖標。 在我的應用程序的應用欄中，我包含了一個抽屜和其他圖標，但抽屜圖標和其他元素之間有一個空格，我希望圖標更靠近抽屜圖標。 在我的應用程序的應用欄中，我包含了一個抽屜和其他圖標，但抽屜圖標和其他元素之間有一個空格，我希望圖標更靠近抽屜圖標。

Answer 1

您可以按照文檔中的說明將這些小部件放在應用欄的操作部分，它會按照您的意願對齊。

https://api.flutter.dev/flutter/material/AppBar-class.html

圖片來自 flutter 文檔

Answer 2

您可以為您的應用程序圖標使用操作，並為徽標和菜單使用前導：

AppBar(
      iconTheme: const IconThemeData(color: Colors.black),
      toolbarHeight: 70,
      elevation: 0.0,
      backgroundColor: const Color(0xFFE5E5E5),
      actions: [
        Icon(
          Icons.inbox_outlined,
          color: Colors.grey[600],
        ),
        const SizedBox(
          width: 20,
        ),
        Icon(Icons.notifications_active_outlined, color: Colors.grey[600]),
        const SizedBox(
          width: 10,
        ),
        CircleAvatar(
          child: const Icon(
            Icons.person,
            color: Colors.grey,
          ),
          backgroundColor: Colors.grey[300],
        ),
        const SizedBox(
          width: 10,
        ),
      ],
      leadingWidth: 120,
      leading: GestureDetector(
        onTap: () => key.currentState!.openDrawer(),
        child:  Row(
        children: [
          const SizedBox(width: 10),
          const Icon(Icons.menu, color: Colors.black),
          Container(
              padding: EdgeInsets.zero,
              height: 50,
              width: 80,
              child: Image.asset("lib/assets/custigrow.png")),
        ],
      ), 
     ),
    ),

Answer 3

使用這些 3 按鈕的actions正確對齊。

您將從 appBar 的標題中刪除行，然后它可能會解決您的徽標空間問題。 如果沒有，請嘗試刪除AppBar的內部（默認）填充。

Leading title和actions已經正確定義，只需在其中使用您的元素。