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

5
// This code is not runnable, it contains code snippets displayed in the Gallery.
6 7 8 9 10

import 'package:flutter/material.dart';

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

  void buttons() {

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

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

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

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

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

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

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

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


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

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


// START buttons_icon
// Member variable holding toggle value.
119
late bool value = true;
120 121

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


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


class SelectionControls {
  void setState(VoidCallback callback) { }

  void selectionControls() {

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

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

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

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


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

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

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

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


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

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

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


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


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