backgroundColor

backgroundColor

backgroundColor

MaterialApp({ title,theme, home: Scaffold({ appBar: AppBar({ title, backgroundColor, brightness. automaticallyImplyLeading, leading, actions, bottom,...}), body,}), })

açıklama

appBar arkaplan rengi.

konum

MaterialApp({ title,theme, home: Scaffold({ appBar: AppBar({ title, backgroundColor, brightness. automaticallyImplyLeading, leading, actions, bottom,...}), 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

basic_appbar
 
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Basic Appbar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BasicAppbarRecipe(title: 'Basic Appbar'),
    );
  }
}

class BasicAppbarRecipe extends StatefulWidget {
  BasicAppbarRecipe({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _BasicAppbarRecipeState createState() => _BasicAppbarRecipeState();
}

class _BasicAppbarRecipeState extends State<BasicAppbarRecipe> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        //setting the icon for the AppBar
        leading: Icon(Icons.import_contacts),
        //setting title for the AppBar
        title: Text("Contacts"),
        actions: [
          //Setting IconButton action item to send message
          IconButton(
            icon: Icon(Icons.message),
            onPressed: () {
              //Handling click on the action items
              clicked(context, "Message sent");
            },
          ),
          //Setting Overflow action items using PopupMenuButton
          PopupMenuButton(
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(child: IconButton(
                  icon: Icon(Icons.email),
                  onPressed: () {
                    clicked(context, "Email sent");
                  },
                ),),
              ];
            },
          )
        ],
      ),
    );
  }

  void clicked(BuildContext context, menu) {
    final scaffold = Scaffold.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: Text(menu),
        action: SnackBarAction(
            label: 'UNDO',
            onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
  }
}

Bir cevap yazın