appBar 뒤로 버튼 색상을 변경하는 방법

118

appBar의 자동 뒤로 버튼을 다른 색상으로 변경하는 방법을 알 수 없습니다. 그것은 비계 아래에 있고 그것을 조사하려고 노력했지만 머리를 감쌀 수는 없습니다.

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Image.asset(
          'images/.jpg',
          fit: BoxFit.fill,
        ),
        centerTitle: true,
      ),
flutter 
— 엠프 리먼
소스

답변:

315

다음 iconTheme과 같이 AppBar 의 속성 을 사용해야합니다 .

appBar: AppBar(
  iconTheme: IconThemeData(
    color: Colors.black, //change your color here
  ),
  title: Text("Sample"),
  centerTitle: true,
),

또는 뒤로 버튼을 직접 처리하려는 경우.

appBar: AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back, color: Colors.black),
    onPressed: () => Navigator.of(context).pop(),
  ), 
  title: Text("Sample"),
  centerTitle: true,
),

뒤로 버튼의 색상을 변경하려는 경우에만 더 좋습니다. 

appBar: AppBar(
  leading: BackButton(
     color: Colors.black
   ), 
  title: Text("Sample"),
  centerTitle: true,
),
— 디에고 벨 로퍼
소스
4
AppBar를 사용하여 모든 화면에 넣는 대신 App AppBar의 Icon을 한 번에 바꿀 수 있습니까?
— djalmafreestyler
1
@djalmafreestyler 같은 사용자 정의 위젯을 작성 ParentPage하고 대신이를 사용할 수 있습니다 일단 모든 장소에서 당신은 appBar이 추가 할 수 있습니다Scaffold
— Sisir
37

'리딩'을 통해 선택한 위젯으로 기본 뒤로 화살표를 재정의 할 수도 있습니다.

leading: new IconButton(
  icon: new Icon(Icons.arrow_back, color: Colors.orange),
  onPressed: () => Navigator.of(context).pop(),
),

AppBar 위젯은 설정되지 않은 경우 기본 '리딩'위젯을 제공합니다.

— Blaneyneil
소스
1
AppBara ModalRoute를 눌렀을 때 뒤로 버튼도 표시 되기 때문에 전적으로 사실이 아닙니다 .
— creativecreatormaybenot
3
그리고 automaticallyImplyLeading: falseAppBar에서 설정 합니다.
— Loolooii
1
대한 Upvoted Navigator.of(context).pop();감사의 친구
— Fadhly Permata
1
모든 네비게이터 기록을 이미 삭제했다면 어떨까요! 이 코드는 충돌합니다!
— Shady Mohamed Sherif
그런 다음 다음과 같이 팝업 할 수 있는지 확인합니다. if (Navigator.canPop (context)) {Navigator.pop (context); } else {// 무엇인가}}
— blaneyneil
14

새 버튼을 만들고 색상을 추가하는 것이 더 쉬운 것 같았습니다. 궁금한 사람을 위해 내가 어떻게했는지 여기에서

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),
— 엠프 리먼
소스
1
아름답게 일했습니다. 가장 간결한 솔루션입니다.
— Hashir Baig 19
5

앱에 대해 전체적으로 선행 아이콘 색상을 설정할 수도 있습니다.

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(
        color: Colors.green
      )
    )
  )
)
— 카 슬로
소스
ThemeData 자체에도 iconTheme가 있으므로 AppBarTheme의 iconTheme입니다.
— Scott
3 
AppBar(        
    automaticallyImplyLeading: false,
    leading: Navigator.canPop(context)
        ? IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
              size: 47,
            ),
            onPressed: () => Navigator.of(context).pop(),
          )
        : null,
);
— 조지 파파 다 키스
소스
1

당신은 사용자 정의 할 수 있습니다 AppBarWidget을 키워드, 함께 중요하거나 사용자 정의 할당 할 수 AppBarWidget을 에 appBar의 재산 비계 :

import 'package:flutter/material.dart';

double _getAppBarTitleWidth(
    double screenWidth, double leadingWidth, double tailWidth) {
  return (screenWidth - leadingWidth - tailWidth);
}

class AppBarWidget extends StatelessWidget with PreferredSizeWidget {
  AppBarWidget(
      {Key key,
      @required this.leadingChildren,
      @required this.tailChildren,
      @required this.title,
      this.leadingWidth: 110,
      this.tailWidth: 30})
      : super(key: key);

  final List<Widget> leadingChildren;
  final List<Widget> tailChildren;
  final String title;
  final double leadingWidth;
  final double tailWidth;

  @override
  Widget build(BuildContext context) {
    // Get screen size
    double _screenWidth = MediaQuery.of(context).size.width;

    // Get title size
    double _titleWidth =
        _getAppBarTitleWidth(_screenWidth, leadingWidth, tailWidth);

    double _offsetToRight = leadingWidth - tailWidth;

    return AppBar(
      title: Row(
        children: [
          Container(
            width: leadingWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: leadingChildren,
            ),
          ),
          Container(
            color: Colors.green,
            width: _titleWidth,
            padding: const EdgeInsets.only(left: 5.0, right: 5),
            child: Container(
              padding: EdgeInsets.only(right: _offsetToRight),
              color: Colors.deepPurpleAccent,
              child: Center(
                child: Text('$title'),
              ),
            ),
          ),
          Container(
            color: Colors.amber,
            width: tailWidth,
            child: Row(
              children: tailChildren,
            ),
          )
        ],
      ),
      titleSpacing: 0.0,
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

다음은 사용 방법에 대한 예입니다.

import 'package:flutter/material.dart';
import 'package:seal_note/ui/Detail/DetailWidget.dart';
import 'package:seal_note/ui/ItemListWidget.dart';

import 'Common/AppBarWidget.dart';
import 'Detail/DetailPage.dart';

class MasterDetailPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MasterDetailPageState();
}

class _MasterDetailPageState extends State<MasterDetailPage> {
  @override
  Widget build(BuildContext context) { 
    return Scaffold(
      appBar: AppBarWidget(leadingChildren: [
        IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
        ),
        Text(
          '文件夹',
          style: TextStyle(fontSize: 14.0),
        ),
      ], tailChildren: [
        Icon(Icons.book),
        Icon(Icons.hd),
      ], title: '英语知识',leadingWidth: 140,tailWidth: 50,),
      body: Text('I am body'),
    );
  }
}
— 짐 간
소스
0 
  appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.white, //modify arrow color from here..
          ),
      );
— 지샨 안사리
소스
1
답변에 컨텍스트를 추가하십시오. 코드 전용 답변은 권장되지 않습니다.
— Arun Vinoth
0

CupertinoPageScaffold의 선행 색상을 변경하려면

Theme(
  data: Theme.of(context).copyWith(
    cupertinoOverrideTheme: CupertinoThemeData(
      scaffoldBackgroundColor: Colors.white70,
      primaryColor: Styles.green21D877, // HERE COLOR OF LEADING
    ),
  ),
  child: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      brightness: Brightness.light,
      backgroundColor: Colors.white,
      middle: Text('Cupertino App Bar'),
    ),
    child: Container(
      child: Center(
        child: CupertinoActivityIndicator(),
      ),
    ),
  ),
)
— 야시
소스
0

선행 아이콘을 사용자 정의하려면 AppBar현재 컨텍스트에 따라 뒤로 단추, 서랍 아이콘 또는 닫기 아이콘 표시를 올바르게 처리 하는 위젯 의 기능을 모방 할 수 있습니다 . 다음은 기본 아이콘을 대체하는 예입니다.

import 'package:flutter/material.dart';

class TopBar extends StatelessWidget with PreferredSizeWidget {
  static const double _topBarHeight = 60;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      toolbarHeight: _topBarHeight,
      title: Text('Title'),
      automaticallyImplyLeading: false,
      leading: _buildLeadingWidget(context),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(_topBarHeight);

  Widget _buildLeadingWidget(BuildContext context) {
    final ScaffoldState scaffold = Scaffold.of(context);
    final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);

    final bool canPop = ModalRoute.of(context)?.canPop ?? false;
    final bool hasDrawer = scaffold?.hasDrawer ?? false;
    final bool useCloseButton = parentRoute is PageRoute<dynamic> && parentRoute.fullscreenDialog;

    Widget leading;
    if (hasDrawer) {
      leading = IconButton(
        icon: const Icon(Icons.menu_rounded),
        onPressed: Scaffold.of(context).openDrawer,
        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
      );
    } else {
      if (canPop) {
        if (useCloseButton) {
          leading = IconButton(
              color: Theme.of(context).colorScheme.onBackground,
              icon: Icon(Icons.close_rounded),
              onPressed: () => Navigator.of(context).maybePop());
        } else {
          leading = IconButton(
              padding: EdgeInsets.all(0),
              iconSize: 38,
              icon: Icon(Icons.chevron_left_rounded),
              onPressed: Navigator.of(context).pop);
        }
      }
    }

    return leading;
  }
}

이 클래스 PreferredSizeWidget는를 믹스 인으로 사용하므로 .NET Framework의 기존 AppBar위젯 대신 사용할 수 있습니다 Scaffold. _buildLeadingWidget필요한 경우 뒤로 단추 만 표시하고 서랍이있는 경우 메뉴 단추를 표시하고 전체 화면 대화 상자가 표시되는 경우 닫기 단추를 표시하는 방법에 유의하십시오 .

— 톰 보 워스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.