appBar
1 | MaterialApp({ title,theme, home: Scaffold({ appBar: AppBar({ title, backgroundColor, brightness. automaticallyImplyLeading, leading, actions, bottom,...}), body,}), }) |
açıklama
Sayfa üstbarı. örneğin web sitelerinde sayfada sitenin logosunun site adinin bulunduğu kısma (header) karşılık gelir.
konum
1 | MaterialApp({ home:Scaffold({ appBar, body, }),... }) |
parametreler
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | appBar: AppBar({ title: Text() backgroundColor: Colors.red // appbar arkaplan rengini değiştitr brightness: Brightness.dark // appbar karanlık mı parlak mı olacak. automaticallyImplyLeading: true , // leading in otomatik oluşturulmasını konrol eder. false ise oluşturulmaz varsayaılanı true dir. leading: Builder(builder: (BuildContext context) { return IconButton( icon: const Icon(Icons.menu), onPressed: () { Scaffold.of(context).openDrawer(); }, tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip, ); }, ), //leading ataması yapılmamıssa flutter otomatik olarak oluşturur ve draver ile sekronize açalışır. safya gecisinde ise geri dugmesi olarak yerini alır. //false verilirse appar içinde geri widget gizlenir. //manuel ataması widget oluşturucu olan Builder(builder: ) ile yapılır. sayfadaki draver ile senkronize çalışması için sayafa context ine ihtiyac duyar. actions: [ IconButton( icon: Icon(Icons.playlist_play), tooltip: 'Buton tipi', onPressed: _fonksiyonadi, ), IconButton( icon: Icon(Icons.playlist_add), tooltip: 'Buton tipi', onPressed: _fonksiyonadi, ), IconButton( icon: Icon(Icons.playlist_add_check), tooltip: 'Buton tipi', onPressed: _fonksiyonadi, ), ], // appBar sağında tıklanabilir widgetler grubu oluşturur. IconButtons, PopupMenuButton gibi... bottom: TabBar( controller: TabController({ initialIndex: 0, @required int length, @required TickerProvider vsync }) yada DefaultTabController({ @required length, initialIndex: 0, @required Widget child}) tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), }) |
örnek uygulama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import 'package:flutter/material.dart'; // This app is a stateful, it tracks the user's current choice. class BasicAppBarSample extends StatefulWidget { @override _BasicAppBarSampleState createState() => _BasicAppBarSampleState(); } class _BasicAppBarSampleState extends State { Choice _selectedChoice = choices[0]; // The app's "state". void _select(Choice choice) { // Causes the app to rebuild with the new _selectedChoice. setState(() { _selectedChoice = choice; }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Basic AppBar'), actions: [ // action button IconButton( icon: Icon(choices[0].icon), onPressed: () { _select(choices[0]); }, ), // action button IconButton( icon: Icon(choices[1].icon), onPressed: () { _select(choices[1]); }, ), // overflow menu PopupMenuButton( onSelected: _select, itemBuilder: (BuildContext context) { return choices.skip(2).map((Choice choice) { return PopupMenuItem( value: choice, child: Text(choice.title), ); }).toList(); }, ), ], ), body: Padding( padding: const EdgeInsets.all(16.0), child: ChoiceCard(choice: _selectedChoice), ), ), ); } } class Choice { const Choice({this.title, this.icon}); final String title; final IconData icon; } const List choices = const [ const Choice(title: 'Car', icon: Icons.directions_car), const Choice(title: 'Bicycle', icon: Icons.directions_bike), const Choice(title: 'Boat', icon: Icons.directions_boat), const Choice(title: 'Bus', icon: Icons.directions_bus), const Choice(title: 'Train', icon: Icons.directions_railway), const Choice(title: 'Walk', icon: Icons.directions_walk), ]; class ChoiceCard extends StatelessWidget { const ChoiceCard({Key key, this.choice}) : super(key: key); final Choice choice; @override Widget build(BuildContext context) { final TextStyle textStyle = Theme.of(context).textTheme.display1; return Card( color: Colors.white, child: Center( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ Icon(choice.icon, size: 128.0, color: textStyle.color), Text(choice.title, style: textStyle), ], ), ), ); } } void main() { runApp(BasicAppBarSample()); } |
