Skip to content

Commit

Permalink
[flutter_web] widgets cheatsheet:IconButton
Browse files Browse the repository at this point in the history
  • Loading branch information
@chen56
chen56 committed May 16, 2024
1 parent 1fbef7f commit a9b0af7
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 56 deletions.
202 changes: 175 additions & 27 deletions notes/flutter_web/lib/routes/notes/widgets/index/page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:you_flutter/better_ui.dart';
import 'package:you_flutter/note.dart';

@NoteAnnotation(label: "Widgets cheatsheets", publish: true)
void build(BuildContext context, Cell print) {
Widget card() {
Widget cardCell() {
var colors = Theme.of(context).colorScheme;
return Wrap(
children: [
Expand Down Expand Up @@ -46,7 +45,7 @@ void build(BuildContext context, Cell print) {
);
}

Widget container() {
Widget containerCell() {
var colors = Theme.of(context).colorScheme;
return Wrap(
children: [
Expand All @@ -72,34 +71,184 @@ void build(BuildContext context, Cell print) {
);
}

Widget buttonStyleButtonCell() {
return Wrap(
children: [
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ElevatedButton(onPressed: () {}, child: const Text("ElevatedButton")),
FilledButton(onPressed: () {}, child: const Text('FilledButton')),
FilledButton.tonal(onPressed: () {}, child: const Text('FilledButton.tonal')),
OutlinedButton(onPressed: () {}, child: const Text('OutlinedButton')),
TextButton(onPressed: () {}, child: const Text('TextButton')),
].map((e) => Padding(padding: const EdgeInsets.all(2), child: e)).toList(),
),
),
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ElevatedButton.icon(onPressed: () {}, icon: const Icon(Icons.image), label: const Text('Add Icon')),
FilledButton.icon(onPressed: () {}, label: const Text('Add Icon'), icon: const Icon(Icons.image)),
FilledButton.tonalIcon(onPressed: () {}, label: const Text('Add Icon'), icon: const Icon(Icons.image)),
OutlinedButton.icon(onPressed: () {}, icon: const Icon(Icons.image), label: const Text('Add Icon')),
TextButton.icon(onPressed: () {}, icon: const Icon(Icons.image), label: const Text('Add Icon'))
].map((e) => Padding(padding: const EdgeInsets.all(2), child: e)).toList(),
),
),
IntrinsicWidth(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const ElevatedButton(onPressed: null, child: Text("ElevatedButton")),
const FilledButton(onPressed: null, child: Text('FilledButton')),
const FilledButton.tonal(onPressed: null, child: Text('FilledButton.tonal')),
const OutlinedButton(onPressed: null, child: Text('OutlinedButton')),
const TextButton(onPressed: null, child: Text('TextButton')),
].map((e) => Padding(padding: const EdgeInsets.all(2), child: e)).toList(),
),
),
],
);
}

Widget floatingActionButtonCell() {
return Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
FloatingActionButton(
onPressed: () {},
tooltip: "FloatingActionButton()",
child: const Text("default"),
),
FloatingActionButton.small(
// isExtended: false,
onPressed: () {},
tooltip: "FloatingActionButton.small()",
child: const Text("small"),
),
FloatingActionButton.large(
// isExtended: false,
onPressed: () {},
tooltip: "FloatingActionButton.large()",
child: const Text("large"),
),
FloatingActionButton.extended(
// isExtended: false,
onPressed: () {},
tooltip: "FloatingActionButton.extended()",
label: const Text('extended'),
icon: const Icon(Icons.thumb_up),
),
].map((e) => Padding(padding: const EdgeInsets.all(2), child: e)).toList(),
);
}

Widget iconButtonCell() {
bool standardSelected = false;
bool filledSelected = false;
bool outlinedSelected = false;
bool tonalSelected = false;
return StatefulBuilder(builder: (context, setState) {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
const Text("IconButton()"),
IconButton(
isSelected: standardSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: () => setState(() => standardSelected = !standardSelected),
),
IconButton(
isSelected: standardSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: null,
),
],
),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
const Text("IconButton.filled()"),
IconButton.filled(
isSelected: filledSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: () {
setState(() => filledSelected = !filledSelected);
},
),
IconButton.filled(
isSelected: filledSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: null,
),
],
),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
const Text("IconButton.filledTonal()"),
IconButton.filledTonal(
isSelected: tonalSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: () {
setState(() => tonalSelected = !tonalSelected);
},
),
IconButton.filledTonal(
isSelected: tonalSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: null,
),
],
),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
const Text("IconButton.outlined()"),
IconButton.outlined(
isSelected: outlinedSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: () {
setState(() => outlinedSelected = !outlinedSelected);
},
),
IconButton.outlined(
isSelected: outlinedSelected,
icon: const Icon(Icons.settings_outlined),
selectedIcon: const Icon(Icons.settings),
onPressed: null,
),
],
),
],
);
});
}

var x = Column(
children: [
Level1MasonryLayout(
title: "xxx",
cellWidth: 300,
children: [
CellView(title: "Card", child: card()),
CellView(title: "Container", child: container()),
CellView(title: "Card", child: card()),
CellView(title: "Container", child: container()),
CellView(title: "Card", child: card()),
CellView(title: "Container", child: container()),
CellView(title: "Card", child: card()),
CellView(title: "Container", child: container()),
],
),
Level1GridLayout(
title: "xxx",
cellWidth: 300,
cellWidth: 500,
children: [
CellView(title: "Card阿斯顿发", child: card()),
CellView(title: "Container", child: container()),
CellView(title: "Card", child: card()),
CellView(title: "Container", child: container()),
CellView(title: "Card", child: card()),
CellView(title: "Container", child: container()),
CellView(title: "Card", child: card()),
CellView(title: "Container", child: container()),
CellView(title: "Card", child: cardCell()),
CellView(title: "Container", child: containerCell()),
CellView(title: "ButtonStyleButton", child: buttonStyleButtonCell()),
CellView(title: "FloatingActionButton", child: floatingActionButtonCell()),
CellView(title: "IconButton", child: iconButtonCell()),
],
),
],
Expand Down Expand Up @@ -133,7 +282,6 @@ class CellView extends StatelessWidget {
),
Container(
padding: const EdgeInsets.all(12),
width: 350,
child: child,
),
],
Expand Down
60 changes: 31 additions & 29 deletions notes/flutter_web/lib/routes/notes/widgets/specific_widgets/button/page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,35 +54,37 @@ the Material Design overview types and how they should be used in designs.
print.addCell(title: const Text("--------new cell------"));
int id = 0;

print(Row(
children: [
FloatingActionButton(
onPressed: () {},
heroTag: "overview.FloatingActionButton${id++}",
tooltip: "FloatingActionButton",
child: const Text("缺省构造器"),
),
FloatingActionButton.small(
// isExtended: false,
onPressed: () {},
heroTag: "overview.FloatingActionButton${id++}",
child: const Text("small"),
),
FloatingActionButton.large(
// isExtended: false,
onPressed: () {},
heroTag: "overview.FloatingActionButton${id++}",
child: const Text("large"),
),
FloatingActionButton.extended(
// isExtended: false,
onPressed: () {},
label: const Text('extended'),
icon: const Icon(Icons.thumb_up),
heroTag: "overview.FloatingActionButton${id++}",
),
],
));
print(
Row(
children: [
FloatingActionButton(
onPressed: () {},
heroTag: "overview.FloatingActionButton${id++}",
tooltip: "FloatingActionButton",
child: const Text("缺省构造器"),
),
FloatingActionButton.small(
// isExtended: false,
onPressed: () {},
heroTag: "overview.FloatingActionButton${id++}",
child: const Text("small"),
),
FloatingActionButton.large(
// isExtended: false,
onPressed: () {},
heroTag: "overview.FloatingActionButton${id++}",
child: const Text("large"),
),
FloatingActionButton.extended(
// isExtended: false,
onPressed: () {},
label: const Text('extended'),
icon: const Icon(Icons.thumb_up),
heroTag: "overview.FloatingActionButton${id++}",
),
],
),
);

print.addCell(title: const Text("--------new cell------"));
print(const MD(r'''
Expand Down

0 comments on commit a9b0af7

Please sign in to comment.