mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
122 lines
3.5 KiB
Dart
122 lines
3.5 KiB
Dart
// Copyright 2014 The Flutter Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
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<BasicAppBarSample> {
|
|
Choice _selectedChoice = choices[0]; // The app's "state".
|
|
|
|
void _select(Choice choice) {
|
|
setState(() { // Causes the app to rebuild with the new _selectedChoice.
|
|
_selectedChoice = choice;
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MaterialApp(
|
|
home: Scaffold(
|
|
appBar: AppBar(
|
|
title: const Text('Basic AppBar'),
|
|
actions: <Widget>[
|
|
IconButton( // action button
|
|
icon: Icon(choices[0].icon),
|
|
onPressed: () { _select(choices[0]); },
|
|
),
|
|
IconButton( // action button
|
|
icon: Icon(choices[1].icon),
|
|
onPressed: () { _select(choices[1]); },
|
|
),
|
|
PopupMenuButton<Choice>( // overflow menu
|
|
onSelected: _select,
|
|
itemBuilder: (BuildContext context) {
|
|
return choices.skip(2).map<PopupMenuItem<Choice>>((Choice choice) {
|
|
return PopupMenuItem<Choice>(
|
|
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<Choice> choices = <Choice>[
|
|
Choice(title: 'Car', icon: Icons.directions_car),
|
|
Choice(title: 'Bicycle', icon: Icons.directions_bike),
|
|
Choice(title: 'Boat', icon: Icons.directions_boat),
|
|
Choice(title: 'Bus', icon: Icons.directions_bus),
|
|
Choice(title: 'Train', icon: Icons.directions_railway),
|
|
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.headline4;
|
|
return Card(
|
|
color: Colors.white,
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: <Widget>[
|
|
Icon(choice.icon, size: 128.0, color: textStyle.color),
|
|
Text(choice.title, style: textStyle),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
void main() {
|
|
runApp(BasicAppBarSample());
|
|
}
|
|
|
|
/*
|
|
Sample Catalog
|
|
|
|
Title: AppBar Basics
|
|
|
|
Summary: A basic AppBar with a title, actions, and an overflow dropdown menu.
|
|
|
|
Description:
|
|
An app that displays one of a half dozen choices with an icon and a title.
|
|
The two most common choices are available as action buttons and the remaining
|
|
choices are included in the overflow dropdown menu.
|
|
|
|
Classes: AppBar, IconButton, PopupMenuButton, Scaffold
|
|
|
|
Sample: BasicAppBarSample
|
|
|
|
See also:
|
|
- The "Layout-Structure" section of the material design specification:
|
|
<https://material.io/guidelines/layout/structure.html#structure-app-bar>
|
|
*/
|