appBar
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
MaterialApp({ home:Scaffold({ appBar, body, }),... })
parametreler
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
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()); }