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 5 6 7 8 9 10 11 12 13 14 15
// 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) { }
  BuildContext context;

  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
  child: Text('BUTTON TITLE'),
30
  onPressed: null,
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
  child: Text('BUTTON TITLE'),
58
  onPressed: null,
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
  child: Text('BUTTON TITLE'),
86
  onPressed: null,
87 88 89 90 91 92 93 94
);
// END


// START buttons_dropdown
// Member variable holding value.
String dropdownValue;

95
// Dropdown button with string values.
96
DropdownButton<String>(
97 98 99 100 101 102 103 104 105 106
  value: dropdownValue,
  onChanged: (String newValue) {
    // null indicates the user didn't select a
    // new value.
    setState(() {
      if (newValue != null)
        dropdownValue = newValue;
    });
  },
  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 119 120 121
);
// END


// START buttons_icon
// Member variable holding toggle value.
bool value;

// 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
    child: Icon(Icons.add),
140 141
    onPressed: null,
  ),
142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
);
// END
  }
}


class SelectionControls {
  void setState(VoidCallback callback) { }

  void selectionControls() {

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

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

// Create a tristate checkbox.
168
Checkbox(
169 170 171 172 173 174 175 176
  tristate: true,
  value: checkboxValue,
  onChanged: (bool value) {
    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 187 188 189 190 191 192 193 194 195 196
// END


// START selectioncontrols_radio
// Member variable holding value.
int radioValue = 0;

// Method setting value.
void handleRadioValueChanged(int value) {
  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 259
  crossAxisCount: 3,
  childAspectRatio: 1.0,
  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
  }
}