Flutterサンプルコード3-アイコンボタンをアプリケーションバーに追加-leadingとactions属性、ボタンonPressed属性
今回はappbarの左と右にアイコンを置きました.
左側に、アイコンボタンまたは単純コンポーネントを左側に配置するプリアンブル属性を使用して、メニューアイコンボタンを表示します.
複数のアイコンボタンなどを右側に置くactionsプロパティを使用して、右側にshopping cart、searchアイコンボタンを入れます.
まず、各ボタンを押下したときの印刷が良好であるか否かも実現される.
左側に、アイコンボタンまたは単純コンポーネントを左側に配置するプリアンブル属性を使用して、メニューアイコンボタンを表示します.
複数のアイコンボタンなどを右側に置くactionsプロパティを使用して、右側にshopping cart、searchアイコンボタンを入れます.
まず、各ボタンを押下したときの印刷が良好であるか否かも実現される.
AppBarのみの実装
class MyPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.amber[600],
centerTitle: true,
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
print('menu button is clicked');
},
),
actions: [
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
print('shopping cart button is clicked');
},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('search button is clicked');
},
),
],
title: Text('OEN'),
),
);
}
}
全体
//main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'OENOEN',
home: MyPage()
);
}
}
class MyPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber[400],
appBar: AppBar(
backgroundColor: Colors.amber[600],
centerTitle: true,
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {
print('menu button is clicked');
},
),
actions: [
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
print('shopping cart button is clicked');
},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('search button is clicked');
},
)
],
title: Text('OEN'),
),
body: Padding(
padding: EdgeInsets.fromLTRB(30.0, 40.0, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: CircleAvatar(
backgroundImage: AssetImage('assets/graduate-gonji.jpeg'),
radius: 60.0,
),
),
Divider(
height: 60.0,
color: Colors.grey[850],
thickness: 0.8,
endIndent: 30.0,
),
Text('NAME',
style: TextStyle(
color: Colors.white,
letterSpacing: 3.0,
),
),
SizedBox(
height: 10.0,
),
Text('OEN',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
fontSize: 28.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 30.0,
),
Text('경력 기간',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
),
),
SizedBox(
height: 10.0,
),
Text('1.9 year',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
fontSize: 28.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 30.0,
),
Text('Today I learned',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
),
),
SizedBox(
height: 7.0,
),
Row(children: [
Icon(Icons.check_circle_outline),
SizedBox(width: 5,),
Text('Flutter',
style: TextStyle(
fontSize: 16.0,
letterSpacing: 1.0
),
),
],
),
Row(children: [
Icon(Icons.check_circle_outline),
SizedBox(width: 5,),
Text('Dart',
style: TextStyle(
fontSize: 16.0,
letterSpacing: 1.0
),
),
],
),
Row(children: [
Icon(Icons.check_circle_outline),
SizedBox(width: 5,),
Text('Android Studio',
style: TextStyle(
fontSize: 16.0,
letterSpacing: 1.0
),
),
],
),
SizedBox(
height: 20.0,
),
Center(
child: CircleAvatar(
backgroundImage: AssetImage('assets/transparent.gif'),
radius: 30.0,
backgroundColor: Colors.amber[400],
),
)
],
),
),
);
}
}
Reference
この問題について(Flutterサンプルコード3-アイコンボタンをアプリケーションバーに追加-leadingとactions属性、ボタンonPressed属性), 我々は、より多くの情報をここで見つけました https://velog.io/@oen/Flutter-예시-코드-3-앱바에-메뉴-아이콘-추가하기-leading과-actions-속성-버튼-onPressed-속성テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol