Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-10 23:08:59 +00:00
Code Issues Releases Wiki Activity

Update flutter web samples (#161)

Browse Source 
* update gallery and web samples

compatable with SDK version 2a576b774c:

Flutter 1.12.3-pre.38 • channel master • git@github.com:flutter/flutter.git
Framework • revision 2a576b774c (2 hours ago) • 2019-11-15 13:15:05 -0800
Engine • revision b2640d97e7
Tools • Dart 2.7.0

* add preview image
This commit is contained in:
John Ryan
2019-11-15 15:29:51 -08:00
committed by GitHub
parent f2ca77008a
commit dd14240dab
25 changed files with 481 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
web/gallery/lib/demo/cupertino/cupertino_navigation_demo.dart
View File

@@ -143,6 +143,7 @@ class CupertinoDemoTab1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
backgroundColor: CupertinoColors.systemGroupedBackground,
child: CustomScrollView(
semanticChildCount: _kChildCount,
slivers: <Widget>[
@@ -199,56 +200,59 @@ class Tab1RowItem extends StatelessWidget {
),
));
},
child: SafeArea(
top: false,
bottom: false,
child: Padding(
padding: const EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0, right: 8.0),
child: Row(
children: <Widget>[
Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8.0),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(colorName),
const Padding(padding: EdgeInsets.only(top: 8.0)),
const Text(
'Buy this cool color',
style: TextStyle(
color: Color(0xFF8E8E93),
fontSize: 13.0,
fontWeight: FontWeight.w300,
),
),
],
child: Container(
color: CupertinoDynamicColor.resolve(CupertinoColors.systemBackground, context),
child: SafeArea(
top: false,
bottom: false,
child: Padding(
padding: const EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0, right: 8.0),
child: Row(
children: <Widget>[
Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8.0),
),
),
),
CupertinoButton(
padding: EdgeInsets.zero,
child: const Icon(CupertinoIcons.plus_circled,
semanticLabel: 'Add',
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(colorName),
const Padding(padding: EdgeInsets.only(top: 8.0)),
Text(
'Buy this cool color',
style: TextStyle(
color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
fontSize: 13.0,
fontWeight: FontWeight.w300,
),
),
],
),
),
),
onPressed: () { },
),
CupertinoButton(
padding: EdgeInsets.zero,
child: const Icon(CupertinoIcons.share,
semanticLabel: 'Share',
CupertinoButton(
padding: EdgeInsets.zero,
child: const Icon(CupertinoIcons.plus_circled,
semanticLabel: 'Add',
),
onPressed: () { },
),
onPressed: () { },
),
],
CupertinoButton(
padding: EdgeInsets.zero,
child: const Icon(CupertinoIcons.share,
semanticLabel: 'Share',
),
onPressed: () { },
),
],
),
),
),
),
@@ -263,7 +267,7 @@ class Tab1RowItem extends StatelessWidget {
row,
Container(
height: 1.0,
color: const Color(0xFFD9D9D9),
color: CupertinoDynamicColor.resolve(CupertinoColors.separator, context),
),
],
);
@@ -336,8 +340,8 @@ class Tab1ItemPageState extends State<Tab1ItemPage> {
const Padding(padding: EdgeInsets.only(top: 6.0)),
Text(
'Item number ${widget.index}',
style: const TextStyle(
color: Color(0xFF8E8E93),
style: TextStyle(
color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
fontSize: 16.0,
fontWeight: FontWeight.w100,
),
@@ -433,7 +437,10 @@ class CupertinoDemoTab2 extends StatelessWidget {
child: CupertinoScrollbar(
child: ListView(
children: <Widget>[
Tab2Header(),
CupertinoUserInterfaceLevel(
data: CupertinoUserInterfaceLevelData.elevated,
child: Tab2Header(),
),
...buildTab2Conversation(),
],
),
@@ -456,18 +463,18 @@ class Tab2Header extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
decoration: const BoxDecoration(
color: Color(0xFFE5E5E5),
decoration: BoxDecoration(
color: CupertinoDynamicColor.resolve(CupertinoColors.systemFill, context),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const <Widget>[
children: <Widget>[
Text(
'SUPPORT TICKET',
style: TextStyle(
color: Color(0xFF646464),
color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
letterSpacing: -0.9,
fontSize: 14.0,
fontWeight: FontWeight.w500,
@@ -476,7 +483,7 @@ class Tab2Header extends StatelessWidget {
Text(
'Show More',
style: TextStyle(
color: Color(0xFF646464),
color: CupertinoDynamicColor.resolve(CupertinoColors.secondaryLabel, context),
letterSpacing: -0.6,
fontSize: 12.0,
fontWeight: FontWeight.w500,
@@ -487,8 +494,8 @@ class Tab2Header extends StatelessWidget {
),
),
Container(
decoration: const BoxDecoration(
color: Color(0xFFF3F3F3),
decoration: BoxDecoration(
color: CupertinoDynamicColor.resolve(CupertinoColors.quaternarySystemFill, context),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
@@ -576,21 +583,31 @@ class Tab2ConversationBubble extends StatelessWidget {
@override
Widget build(BuildContext context) {
Color backgroundColor;
Color foregroundColor;
switch (color) {
case Tab2ConversationBubbleColor.gray:
backgroundColor = CupertinoDynamicColor.resolve(CupertinoColors.systemFill, context);
foregroundColor = CupertinoDynamicColor.resolve(CupertinoColors.label, context);
break;
case Tab2ConversationBubbleColor.blue:
backgroundColor = CupertinoTheme.of(context).primaryColor;
foregroundColor = CupertinoColors.white;
break;
}
return Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(18.0)),
color: color == Tab2ConversationBubbleColor.blue
? CupertinoColors.activeBlue
: CupertinoColors.lightBackgroundGray,
color: backgroundColor,
),
margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 10.0),
child: Text(
text,
style: TextStyle(
color: color == Tab2ConversationBubbleColor.blue
? CupertinoColors.white
: CupertinoColors.black,
color: foregroundColor,
letterSpacing: -0.4,
fontSize: 15.0,
fontWeight: FontWeight.w400,
@@ -655,11 +672,14 @@ class Tab2ConversationRow extends StatelessWidget {
crossAxisAlignment: isSelf ? CrossAxisAlignment.center : CrossAxisAlignment.end,
children: <Widget>[
if (avatar != null) avatar,
Tab2ConversationBubble(
text: text,
color: isSelf
CupertinoUserInterfaceLevel(
data: CupertinoUserInterfaceLevelData.elevated,
child: Tab2ConversationBubble(
text: text,
color: isSelf
? Tab2ConversationBubbleColor.blue
: Tab2ConversationBubbleColor.gray,
),
),
],
),
@@ -709,55 +729,47 @@ class CupertinoDemoTab3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
trailing: trailingButtons,
),
child: DecoratedBox(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).brightness == Brightness.light
? CupertinoColors.extraLightBackgroundGray
: CupertinoColors.darkBackgroundGray,
),
child: ListView(
children: <Widget>[
const Padding(padding: EdgeInsets.only(top: 32.0)),
GestureDetector(
onTap: () {
Navigator.of(context, rootNavigator: true).push(
CupertinoPageRoute<bool>(
fullscreenDialog: true,
builder: (BuildContext context) => Tab3Dialog(),
),
);
},
child: Container(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
border: const Border(
top: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
),
navigationBar: CupertinoNavigationBar(trailing: trailingButtons),
backgroundColor: CupertinoColors.systemBackground,
child: ListView(
children: <Widget>[
const Padding(padding: EdgeInsets.only(top: 32.0)),
GestureDetector(
onTap: () {
Navigator.of(context, rootNavigator: true).push(
CupertinoPageRoute<bool>(
fullscreenDialog: true,
builder: (BuildContext context) => Tab3Dialog(),
),
height: 44.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: SafeArea(
top: false,
bottom: false,
child: Row(
children: <Widget>[
Text(
'Sign in',
style: TextStyle(color: CupertinoTheme.of(context).primaryColor),
),
],
),
);
},
child: Container(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
border: const Border(
top: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
),
),
height: 44.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: SafeArea(
top: false,
bottom: false,
child: Row(
children: <Widget>[
Text(
'Sign in',
style: TextStyle(color: CupertinoTheme.of(context).primaryColor),
),
],
),
),
),
),
],
),
),
],
),
);
}

167
web/gallery/lib/demo/cupertino/cupertino_picker_demo.dart
View File

@@ -17,21 +17,50 @@ class CupertinoPickerDemo extends StatefulWidget {
_CupertinoPickerDemoState createState() => _CupertinoPickerDemoState();
}
class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
int _selectedColorIndex = 0;
class _BottomPicker extends StatelessWidget {
const _BottomPicker({
Key key,
@required this.child,
}) : assert(child != null),
super(key: key);
Duration timer = const Duration();
final Widget child;
// Value that is shown in the date picker in date mode.
DateTime date = DateTime.now();
@override
Widget build(BuildContext context) {
return Container(
height: _kPickerSheetHeight,
padding: const EdgeInsets.only(top: 6.0),
color: CupertinoColors.systemBackground.resolveFrom(context),
child: DefaultTextStyle(
style: TextStyle(
color: CupertinoColors.label.resolveFrom(context),
fontSize: 22.0,
),
child: GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
onTap: () { },
child: SafeArea(
top: false,
child: child,
),
),
),
);
}
}
// Value that is shown in the date picker in time mode.
DateTime time = DateTime.now();
class _Menu extends StatelessWidget {
const _Menu({
Key key,
@required this.children,
}) : assert(children != null),
super(key: key);
// Value that is shown in the date picker in dateAndTime mode.
DateTime dateTime = DateTime.now();
final List<Widget> children;
Widget _buildMenu(List<Widget> children) {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
@@ -54,28 +83,21 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
),
);
}
}
Widget _buildBottomPicker(Widget picker) {
return Container(
height: _kPickerSheetHeight,
padding: const EdgeInsets.only(top: 6.0),
color: CupertinoColors.white,
child: DefaultTextStyle(
style: const TextStyle(
color: CupertinoColors.black,
fontSize: 22.0,
),
child: GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
onTap: () { },
child: SafeArea(
top: false,
child: picker,
),
),
),
);
}
class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
int _selectedColorIndex = 0;
Duration timer = const Duration();
// Value that is shown in the date picker in date mode.
DateTime date = DateTime.now();
// Value that is shown in the date picker in time mode.
DateTime time = DateTime.now();
// Value that is shown in the date picker in dateAndTime mode.
DateTime dateTime = DateTime.now();
Widget _buildColorPicker(BuildContext context) {
final FixedExtentScrollController scrollController =
@@ -86,11 +108,11 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
await showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker(
CupertinoPicker(
return _BottomPicker(
child: CupertinoPicker(
scrollController: scrollController,
itemExtent: _kPickerItemHeight,
backgroundColor: CupertinoColors.white,
backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
onSelectedItemChanged: (int index) {
setState(() => _selectedColorIndex = index);
},
@@ -104,14 +126,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
},
);
},
child: _buildMenu(
<Widget>[
child: _Menu(
children: <Widget>[
const Text('Favorite Color'),
Text(
coolColorNames[_selectedColorIndex],
style: const TextStyle(
color: CupertinoColors.inactiveGray
),
style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
),
],
),
@@ -124,8 +144,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker(
CupertinoTimerPicker(
return _BottomPicker(
child: CupertinoTimerPicker(
backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
initialTimerDuration: timer,
onTimerDurationChanged: (Duration newTimer) {
setState(() => timer = newTimer);
@@ -135,14 +156,14 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
},
);
},
child: _buildMenu(
<Widget>[
child: _Menu(
children: <Widget>[
const Text('Countdown Timer'),
Text(
'${timer.inHours}:'
'${(timer.inMinutes % 60).toString().padLeft(2,'0')}:'
'${(timer.inSeconds % 60).toString().padLeft(2,'0')}',
style: const TextStyle(color: CupertinoColors.inactiveGray),
style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
),
],
),
@@ -155,8 +176,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker(
CupertinoDatePicker(
return _BottomPicker(
child: CupertinoDatePicker(
backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
mode: CupertinoDatePickerMode.date,
initialDateTime: date,
onDateTimeChanged: (DateTime newDateTime) {
@@ -167,12 +189,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
},
);
},
child: _buildMenu(
<Widget>[
child: _Menu(
children: <Widget>[
const Text('Date'),
Text(
DateFormat.yMMMMd().format(date),
style: const TextStyle(color: CupertinoColors.inactiveGray),
style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
),
]
),
@@ -185,8 +207,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker(
CupertinoDatePicker(
return _BottomPicker(
child: CupertinoDatePicker(
backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
mode: CupertinoDatePickerMode.time,
initialDateTime: time,
onDateTimeChanged: (DateTime newDateTime) {
@@ -197,12 +220,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
},
);
},
child: _buildMenu(
<Widget>[
child: _Menu(
children: <Widget>[
const Text('Time'),
Text(
DateFormat.jm().format(time),
style: const TextStyle(color: CupertinoColors.inactiveGray),
style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
),
],
),
@@ -215,8 +238,9 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildBottomPicker(
CupertinoDatePicker(
return _BottomPicker(
child: CupertinoDatePicker(
backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
mode: CupertinoDatePickerMode.dateAndTime,
initialDateTime: dateTime,
onDateTimeChanged: (DateTime newDateTime) {
@@ -227,12 +251,12 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
},
);
},
child: _buildMenu(
<Widget>[
child: _Menu(
children: <Widget>[
const Text('Date and Time'),
Text(
DateFormat.yMMMd().add_jm().format(dateTime),
style: const TextStyle(color: CupertinoColors.inactiveGray),
style: TextStyle(color: CupertinoDynamicColor.resolve(CupertinoColors.inactiveGray, context)),
),
],
),
@@ -252,22 +276,15 @@ class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
),
child: DefaultTextStyle(
style: CupertinoTheme.of(context).textTheme.textStyle,
child: DecoratedBox(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).brightness == Brightness.light
? CupertinoColors.extraLightBackgroundGray
: CupertinoColors.darkBackgroundGray,
),
child: ListView(
children: <Widget>[
const Padding(padding: EdgeInsets.only(top: 32.0)),
_buildColorPicker(context),
_buildCountdownTimerPicker(context),
_buildDatePicker(context),
_buildTimePicker(context),
_buildDateAndTimePicker(context),
],
),
child: ListView(
children: <Widget>[
const Padding(padding: EdgeInsets.only(top: 32.0)),
_buildColorPicker(context),
_buildCountdownTimerPicker(context),
_buildDatePicker(context),
_buildTimePicker(context),
_buildDateAndTimePicker(context),
],
),
),
);

110
web/gallery/lib/demo/cupertino/cupertino_refresh_demo.dart
View File

@@ -41,59 +41,53 @@ class _CupertinoRefreshControlDemoState extends State<CupertinoRefreshControlDem
return DefaultTextStyle(
style: CupertinoTheme.of(context).textTheme.textStyle,
child: CupertinoPageScaffold(
child: DecoratedBox(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).brightness == Brightness.light
? CupertinoColors.extraLightBackgroundGray
: CupertinoColors.darkBackgroundGray,
),
child: CustomScrollView(
// If left unspecified, the [CustomScrollView] appends an
// [AlwaysScrollableScrollPhysics]. Behind the scene, the ScrollableState
// will attach that [AlwaysScrollableScrollPhysics] to the output of
// [ScrollConfiguration.of] which will be a [ClampingScrollPhysics]
// on Android.
// To demonstrate the iOS behavior in this demo and to ensure that the list
// always scrolls, we specifically use a [BouncingScrollPhysics] combined
// with a [AlwaysScrollableScrollPhysics]
physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle: const Text('Refresh'),
// We're specifying a back label here because the previous page
// is a Material page. CupertinoPageRoutes could auto-populate
// these back labels.
previousPageTitle: 'Cupertino',
trailing: CupertinoDemoDocumentationButton(CupertinoRefreshControlDemo.routeName),
),
CupertinoSliverRefreshControl(
onRefresh: () {
return Future<void>.delayed(const Duration(seconds: 2))
..then<void>((_) {
if (mounted) {
setState(() => repopulateList());
}
});
},
),
SliverSafeArea(
top: false, // Top safe area is consumed by the navigation bar.
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return _ListItem(
name: randomizedContacts[index][0],
place: randomizedContacts[index][1],
date: randomizedContacts[index][2],
called: randomizedContacts[index][3] == 'true',
);
},
childCount: 20,
),
backgroundColor: CupertinoColors.systemGroupedBackground,
child: CustomScrollView(
// If left unspecified, the [CustomScrollView] appends an
// [AlwaysScrollableScrollPhysics]. Behind the scene, the ScrollableState
// will attach that [AlwaysScrollableScrollPhysics] to the output of
// [ScrollConfiguration.of] which will be a [ClampingScrollPhysics]
// on Android.
// To demonstrate the iOS behavior in this demo and to ensure that the list
// always scrolls, we specifically use a [BouncingScrollPhysics] combined
// with a [AlwaysScrollableScrollPhysics]
physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle: const Text('Refresh'),
// We're specifying a back label here because the previous page
// is a Material page. CupertinoPageRoutes could auto-populate
// these back labels.
previousPageTitle: 'Cupertino',
trailing: CupertinoDemoDocumentationButton(CupertinoRefreshControlDemo.routeName),
),
CupertinoSliverRefreshControl(
onRefresh: () {
return Future<void>.delayed(const Duration(seconds: 2))
..then<void>((_) {
if (mounted) {
setState(() => repopulateList());
}
});
},
),
SliverSafeArea(
top: false, // Top safe area is consumed by the navigation bar.
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return _ListItem(
name: randomizedContacts[index][0],
place: randomizedContacts[index][1],
date: randomizedContacts[index][2],
called: randomizedContacts[index][3] == 'true',
);
},
childCount: 20,
),
),
],
),
),
],
),
),
);
@@ -163,7 +157,7 @@ class _ListItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
color: CupertinoDynamicColor.resolve(CupertinoColors.systemBackground, context),
height: 60.0,
padding: const EdgeInsets.only(top: 9.0),
child: Row(
@@ -171,11 +165,11 @@ class _ListItem extends StatelessWidget {
Container(
width: 38.0,
child: called
? const Align(
? Align(
alignment: Alignment.topCenter,
child: Icon(
CupertinoIcons.phone_solid,
color: CupertinoColors.inactiveGray,
color: CupertinoColors.inactiveGray.resolveFrom(context),
size: 18.0,
),
)
@@ -209,10 +203,10 @@ class _ListItem extends StatelessWidget {
place,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
style: TextStyle(
fontSize: 15.0,
letterSpacing: -0.24,
color: CupertinoColors.inactiveGray,
color: CupertinoColors.inactiveGray.resolveFrom(context),
),
),
],
@@ -220,8 +214,8 @@ class _ListItem extends StatelessWidget {
),
Text(
date,
style: const TextStyle(
color: CupertinoColors.inactiveGray,
style: TextStyle(
color: CupertinoColors.inactiveGray.resolveFrom(context),
fontSize: 15.0,
letterSpacing: -0.41,
),

98
web/gallery/lib/demo/cupertino/cupertino_segmented_control_demo.dart
View File

@@ -46,7 +46,13 @@ class _CupertinoSegmentedControlDemoState extends State<CupertinoSegmentedContro
),
};
int sharedValue = 0;
int currentSegment = 0;
void onValueChanged(int newValue) {
setState(() {
currentSegment = newValue;
});
}
@override
Widget build(BuildContext context) {
@@ -60,23 +66,28 @@ class _CupertinoSegmentedControlDemoState extends State<CupertinoSegmentedContro
trailing: CupertinoDemoDocumentationButton(CupertinoSegmentedControlDemo.routeName),
),
child: DefaultTextStyle(
style: CupertinoTheme.of(context).textTheme.textStyle,
style: CupertinoTheme.of(context).textTheme.textStyle.copyWith(fontSize: 13),
child: SafeArea(
child: Column(
children: <Widget>[
const Padding(
padding: EdgeInsets.all(16.0),
),
const Padding(padding: EdgeInsets.all(16.0)),
SizedBox(
width: 500.0,
child: CupertinoSegmentedControl<int>(
children: children,
onValueChanged: (int newValue) {
setState(() {
sharedValue = newValue;
});
},
groupValue: sharedValue,
onValueChanged: onValueChanged,
groupValue: currentSegment,
),
),
SizedBox(
width: 500,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: CupertinoSlidingSegmentedControl<int>(
children: children,
onValueChanged: onValueChanged,
groupValue: currentSegment,
),
),
),
Expanded(
@@ -85,36 +96,43 @@ class _CupertinoSegmentedControlDemoState extends State<CupertinoSegmentedContro
vertical: 32.0,
horizontal: 16.0,
),
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 64.0,
horizontal: 16.0,
child: CupertinoUserInterfaceLevel(
data: CupertinoUserInterfaceLevelData.elevated,
child: Builder(
builder: (BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
vertical: 64.0,
horizontal: 16.0,
),
decoration: BoxDecoration(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(3.0),
boxShadow: const <BoxShadow>[
BoxShadow(
offset: Offset(0.0, 3.0),
blurRadius: 5.0,
spreadRadius: -1.0,
color: _kKeyUmbraOpacity,
),
BoxShadow(
offset: Offset(0.0, 6.0),
blurRadius: 10.0,
spreadRadius: 0.0,
color: _kKeyPenumbraOpacity,
),
BoxShadow(
offset: Offset(0.0, 1.0),
blurRadius: 18.0,
spreadRadius: 0.0,
color: _kAmbientShadowOpacity,
),
],
),
child: icons[currentSegment],
);
},
),
decoration: BoxDecoration(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(3.0),
boxShadow: const <BoxShadow>[
BoxShadow(
offset: Offset(0.0, 3.0),
blurRadius: 5.0,
spreadRadius: -1.0,
color: _kKeyUmbraOpacity,
),
BoxShadow(
offset: Offset(0.0, 6.0),
blurRadius: 10.0,
spreadRadius: 0.0,
color: _kKeyPenumbraOpacity,
),
BoxShadow(
offset: Offset(0.0, 1.0),
blurRadius: 18.0,
spreadRadius: 0.0,
color: _kAmbientShadowOpacity,
),
],
),
child: icons[sharedValue],
),
),
),

4
web/gallery/lib/demo/images_demo.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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';
import '../gallery/demo.dart';

4
web/gallery/lib/demo/material/elevation_demo.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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';
import '../../gallery/demo.dart';

4
web/gallery/lib/demo/transformations/transformations_demo.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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 'dart:ui' show Vertices;
import 'package:flutter/material.dart';
import 'transformations_demo_board.dart';

4
web/gallery/lib/demo/transformations/transformations_demo_board.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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 'dart:collection' show IterableMixin;
import 'dart:math';
import 'dart:ui' show Vertices;

4
web/gallery/lib/demo/transformations/transformations_demo_color_picker.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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';
// A generic widget for a list of selectable colors.

4
web/gallery/lib/demo/transformations/transformations_demo_edit_board_point.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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';
import 'transformations_demo_board.dart';
import 'transformations_demo_color_picker.dart';

4
web/gallery/lib/demo/transformations/transformations_demo_gesture_transformable.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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';
import 'package:vector_math/vector_math_64.dart' show Vector3;
import 'transformations_demo_inertial_motion.dart';

4
web/gallery/lib/demo/transformations/transformations_demo_inertial_motion.dart
View File

@@ -1,3 +1,7 @@
// Copyright 2014 The Chromium 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 'dart:math';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' show Vector2;