example_code.dart 5.44 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6 7 8 9 10 11
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Note: This code is not runnable, it contains code snippets displayed in the
// gallery.

import 'package:flutter/material.dart';

class ButtonsDemo {
  void setState(VoidCallback callback) { }
12
  late BuildContext context;
13 14 15

  void buttons() {

16 17 18
// START buttons_elevated
// Create an elevated button.
ElevatedButton(
19
  child: const Text('BUTTON TITLE'),
20 21
  onPressed: () {
    // Perform some action
22
  },
23 24 25 26 27
);

// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
28
const ElevatedButton(
29
  onPressed: null,
30
  child: Text('BUTTON TITLE'),
31
);
32 33 34

// Create a button with an icon and a
// title.
35
ElevatedButton.icon(
36 37 38 39 40 41
  icon: const Icon(Icons.add, size: 18.0),
  label: const Text('BUTTON TITLE'),
  onPressed: () {
    // Perform some action
  },
);
42 43
// END

44 45 46
// START buttons_outlined
// Create an outlined button.
OutlinedButton(
47 48 49
  child: const Text('BUTTON TITLE'),
  onPressed: () {
    // Perform some action
50
  },
51 52 53 54 55
);

// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
56
const OutlinedButton(
57
  onPressed: null,
58
  child: Text('BUTTON TITLE'),
59 60 61 62
);

// Create a button with an icon and a
// title.
63
OutlinedButton.icon(
64 65 66 67 68 69 70
  icon: const Icon(Icons.add, size: 18.0),
  label: const Text('BUTTON TITLE'),
  onPressed: () {
    // Perform some action
  },
);
// END
71

72 73 74
// START buttons_text
// Create a text button.
TextButton(
75
  child: const Text('BUTTON TITLE'),
76 77
  onPressed: () {
    // Perform some action
78
  },
79 80 81 82 83
);

// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
84
const TextButton(
85
  onPressed: null,
86
  child: Text('BUTTON TITLE'),
87 88 89 90 91 92
);
// END


// START buttons_dropdown
// Member variable holding value.
93
String? dropdownValue;
94

95
// Dropdown button with string values.
96
DropdownButton<String>(
97
  value: dropdownValue,
98
  onChanged: (String? newValue) {
99 100 101
    // null indicates the user didn't select a
    // new value.
    setState(() {
102
      if (newValue != null) {
103
        dropdownValue = newValue;
104
      }
105 106 107
    });
  },
  items: <String>['One', 'Two', 'Free', 'Four']
108
    .map<DropdownMenuItem<String>>((String value) {
109
      return DropdownMenuItem<String>(
110
        value: value,
111
        child: Text(value));
112
    })
113
    .toList(),
114 115 116 117 118 119
);
// END


// START buttons_icon
// Member variable holding toggle value.
120
late bool value;
121 122

// Toggleable icon button.
123
IconButton(
124
  icon: const Icon(Icons.thumb_up),
125 126 127
  onPressed: () {
    setState(() => value = !value);
  },
128
  color: value ? Theme.of(context).primaryColor : null,
129 130 131 132 133 134
);
// END


// START buttons_action
// Floating action button in Scaffold.
135 136
Scaffold(
  appBar: AppBar(
137
    title: const Text('Demo'),
138
  ),
139
  floatingActionButton: const FloatingActionButton(
140
    onPressed: null,
141
    child: Icon(Icons.add),
142
  ),
143 144 145 146 147 148 149 150 151 152 153 154 155
);
// END
  }
}


class SelectionControls {
  void setState(VoidCallback callback) { }

  void selectionControls() {

// START selectioncontrols_checkbox
// Member variable holding the checkbox's value.
156
bool? checkboxValue = false;
157 158

// Create a checkbox.
159
Checkbox(
160
  value: checkboxValue,
161
  onChanged: (bool? value) {
162 163
    setState(() {
      checkboxValue = value;
164 165 166 167 168
    });
  },
);

// Create a tristate checkbox.
169
Checkbox(
170 171
  tristate: true,
  value: checkboxValue,
172
  onChanged: (bool? value) {
173 174 175 176 177
    setState(() {
      checkboxValue = value;
    });
  },
);
178 179 180 181

// Create a disabled checkbox.
// Checkboxes are disabled when onChanged isn't
// specified or null.
182
const Checkbox(value: false, onChanged: null);
183 184 185 186 187
// END


// START selectioncontrols_radio
// Member variable holding value.
188
int? radioValue = 0;
189 190

// Method setting value.
191
void handleRadioValueChanged(int? value) {
192 193 194 195 196 197
  setState(() {
    radioValue = value;
  });
}

// Creates a set of radio buttons.
198
Row(
199
  children: <Widget>[
200
    Radio<int>(
201 202
      value: 0,
      groupValue: radioValue,
203
      onChanged: handleRadioValueChanged,
204
    ),
205
    Radio<int>(
206 207
      value: 1,
      groupValue: radioValue,
208
      onChanged: handleRadioValueChanged,
209
    ),
210
    Radio<int>(
211 212
      value: 2,
      groupValue: radioValue,
213 214 215
      onChanged: handleRadioValueChanged,
    ),
  ],
216 217 218
);

// Creates a disabled radio button.
219
const Radio<int>(
220
  value: 0,
221
  groupValue: 0,
222
  onChanged: null,
223 224 225 226 227 228 229 230 231
);
// END


// START selectioncontrols_switch
// Member variable holding value.
bool switchValue = false;

// Create a switch.
232
Switch(
233 234 235 236 237 238 239 240 241 242 243
  value: switchValue,
  onChanged: (bool value) {
    setState(() {
      switchValue = value;
    }
  );
});

// Create a disabled switch.
// Switches are disabled when onChanged isn't
// specified or null.
244
const Switch(value: false, onChanged: null);
245 246 247 248 249 250 251 252 253 254
// END
  }
}


class GridLists {
  void gridlists() {
// START gridlists
// Creates a scrollable grid list with images
// loaded from the web.
255
GridView.count(
256 257 258 259
  crossAxisCount: 3,
  padding: const EdgeInsets.all(4.0),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
260 261 262 263 264
  children: <String>[
    'https://example.com/image-0.jpg',
    'https://example.com/image-1.jpg',
    'https://example.com/image-2.jpg',
    '...',
265
    'https://example.com/image-n.jpg',
266
  ].map<Widget>((String url) {
267 268
    return GridTile(
      footer: GridTileBar(
269
        title: Text(url),
270
      ),
271
      child: Image.network(url, fit: BoxFit.cover),
272
    );
273
  }).toList(),
274 275 276 277
);
// END
  }
}
278 279 280 281 282


class AnimatedImage {
  void animatedImage() {
// START animated_image
283
Image.network('https://example.com/animated-image.gif');
284 285 286
// END
  }
}