1 | // Copyright 2014 The Flutter Authors. All rights reserved. |
2 | // Use of this source code is governed by a BSD-style license that can be |
3 | // found in the LICENSE file. |
4 | |
5 | import 'package:flutter/material.dart'; |
6 | |
7 | /// Flutter code sample for [ChipAttributes.chipAnimationStyle]. |
8 | |
9 | void main() => runApp(const ChipAnimationStyleExampleApp()); |
10 | |
11 | class ChipAnimationStyleExampleApp extends StatelessWidget { |
12 | const ChipAnimationStyleExampleApp({super.key}); |
13 | |
14 | @override |
15 | Widget build(BuildContext context) { |
16 | return const MaterialApp( |
17 | home: Scaffold( |
18 | body: Center( |
19 | child: ChipAnimationStyleExample(), |
20 | ), |
21 | ), |
22 | ); |
23 | } |
24 | } |
25 | |
26 | class ChipAnimationStyleExample extends StatefulWidget { |
27 | const ChipAnimationStyleExample({super.key}); |
28 | |
29 | @override |
30 | State<ChipAnimationStyleExample> createState() => |
31 | _ChipAnimationStyleExampleState(); |
32 | } |
33 | |
34 | class _ChipAnimationStyleExampleState extends State<ChipAnimationStyleExample> { |
35 | bool enabled = true; |
36 | bool selected = false; |
37 | bool showCheckmark = true; |
38 | bool showDeleteIcon = true; |
39 | |
40 | @override |
41 | Widget build(BuildContext context) { |
42 | return Column( |
43 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, |
44 | children: <Widget>[ |
45 | Row( |
46 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, |
47 | children: <Widget>[ |
48 | Column( |
49 | mainAxisSize: MainAxisSize.min, |
50 | children: <Widget>[ |
51 | FilterChip.elevated( |
52 | chipAnimationStyle: ChipAnimationStyle( |
53 | enableAnimation: AnimationStyle( |
54 | duration: const Duration(seconds: 3), |
55 | reverseDuration: const Duration(seconds: 1), |
56 | ), |
57 | ), |
58 | onSelected: !enabled ? null : (bool value) {}, |
59 | disabledColor: Colors.red.withOpacity(0.12), |
60 | backgroundColor: Colors.amber, |
61 | label: Text(enabled ? 'Enabled' : 'Disabled' ), |
62 | ), |
63 | const SizedBox(height: 16), |
64 | ElevatedButton( |
65 | onPressed: () { |
66 | setState(() { |
67 | enabled = !enabled; |
68 | }); |
69 | }, |
70 | child: Text(enabled ? 'Disable' : 'Enable' ), |
71 | ), |
72 | ], |
73 | ), |
74 | Column( |
75 | mainAxisSize: MainAxisSize.min, |
76 | children: <Widget>[ |
77 | FilterChip.elevated( |
78 | chipAnimationStyle: ChipAnimationStyle( |
79 | selectAnimation: AnimationStyle( |
80 | duration: const Duration(seconds: 3), |
81 | reverseDuration: const Duration(seconds: 1), |
82 | ), |
83 | ), |
84 | backgroundColor: Colors.amber, |
85 | selectedColor: Colors.blue, |
86 | selected: selected, |
87 | showCheckmark: false, |
88 | onSelected: (bool value) {}, |
89 | label: Text(selected ? 'Selected' : 'Unselected' ), |
90 | ), |
91 | const SizedBox(height: 16), |
92 | ElevatedButton( |
93 | onPressed: () { |
94 | setState(() { |
95 | selected = !selected; |
96 | }); |
97 | }, |
98 | child: Text(selected ? 'Unselect' : 'Select' ), |
99 | ), |
100 | ], |
101 | ), |
102 | ], |
103 | ), |
104 | Row( |
105 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, |
106 | children: <Widget>[ |
107 | Column( |
108 | mainAxisSize: MainAxisSize.min, |
109 | children: <Widget>[ |
110 | FilterChip.elevated( |
111 | chipAnimationStyle: ChipAnimationStyle( |
112 | avatarDrawerAnimation: AnimationStyle( |
113 | duration: const Duration(seconds: 2), |
114 | reverseDuration: const Duration(seconds: 1), |
115 | ), |
116 | ), |
117 | selected: showCheckmark, |
118 | onSelected: (bool value) {}, |
119 | label: Text(showCheckmark ? 'Checked' : 'Unchecked' ), |
120 | ), |
121 | const SizedBox(height: 16), |
122 | ElevatedButton( |
123 | onPressed: () { |
124 | setState(() { |
125 | showCheckmark = !showCheckmark; |
126 | }); |
127 | }, |
128 | child: |
129 | Text(showCheckmark ? 'Hide checkmark' : 'Show checkmark' ), |
130 | ), |
131 | ], |
132 | ), |
133 | Column( |
134 | mainAxisSize: MainAxisSize.min, |
135 | children: <Widget>[ |
136 | FilterChip.elevated( |
137 | chipAnimationStyle: ChipAnimationStyle( |
138 | deleteDrawerAnimation: AnimationStyle( |
139 | duration: const Duration(seconds: 2), |
140 | reverseDuration: const Duration(seconds: 1), |
141 | ), |
142 | ), |
143 | onDeleted: showDeleteIcon ? () {} : null, |
144 | onSelected: (bool value) {}, |
145 | label: Text(showDeleteIcon ? 'Deletable' : 'Undeletable' ), |
146 | ), |
147 | const SizedBox(height: 16), |
148 | ElevatedButton( |
149 | onPressed: () { |
150 | setState(() { |
151 | showDeleteIcon = !showDeleteIcon; |
152 | }); |
153 | }, |
154 | child: Text( |
155 | showDeleteIcon ? 'Hide delete icon' : 'Show delete icon' ), |
156 | ), |
157 | ], |
158 | ), |
159 | ], |
160 | ), |
161 | ], |
162 | ); |
163 | } |
164 | } |
165 | |