Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
11d81b11
Unverified
Commit
11d81b11
authored
7 years ago
by
Hans Muller
Committed by
GitHub
7 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add OutlineButton, Tristate Checkbox to Flutter Gallery (#15312)
parent
465929f7
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
202 additions
and
36 deletions
+202
-36
buttons_demo.dart
examples/flutter_gallery/lib/demo/material/buttons_demo.dart
+119
-20
selection_controls_demo.dart
...er_gallery/lib/demo/material/selection_controls_demo.dart
+32
-13
example_code.dart
examples/flutter_gallery/lib/gallery/example_code.dart
+51
-3
No files found.
examples/flutter_gallery/lib/demo/material/buttons_demo.dart
View file @
11d81b11
...
...
@@ -18,6 +18,12 @@ const String _flatText = 'A flat button displays an ink splash on press '
const
String
_flatCode
=
'buttons_flat'
;
const
String
_outlineText
=
'Outline buttons become opaque and elevate when pressed. They are often '
'paired with raised buttons to indicate an alternative, secondary action.'
;
const
String
_outlineCode
=
'buttons_outline'
;
const
String
_dropdownText
=
'A dropdown button displays a menu that
\'
s used to select a value from a '
'small set of values. The button displays the current value and a down '
...
...
@@ -62,6 +68,12 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
demoWidget:
buildFlatButton
(),
exampleCodeTag:
_flatCode
,
),
new
ComponentDemoTabData
(
tabName:
'OUTLINE'
,
description:
_outlineText
,
demoWidget:
buildOutlineButton
(),
exampleCodeTag:
_outlineCode
,
),
new
ComponentDemoTabData
(
tabName:
'DROPDOWN'
,
description:
_dropdownText
,
...
...
@@ -91,19 +103,41 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
Widget
buildRaisedButton
()
{
return
new
Align
(
alignment:
const
Alignment
(
0.0
,
-
0.2
),
child:
new
ButtonBar
(
child:
new
Column
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
RaisedButton
(
child:
const
Text
(
'RAISED BUTTON'
),
onPressed:
()
{
// Perform some action
},
new
ButtonBar
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
RaisedButton
(
child:
const
Text
(
'RAISED BUTTON'
),
onPressed:
()
{
// Perform some action
},
),
const
RaisedButton
(
child:
const
Text
(
'DISABLED'
),
onPressed:
null
,
),
],
),
new
ButtonBar
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
RaisedButton
.
icon
(
icon:
const
Icon
(
Icons
.
add
,
size:
18.0
),
label:
const
Text
(
'RAISED BUTTON'
),
onPressed:
()
{
// Perform some action
},
),
new
RaisedButton
.
icon
(
icon:
const
Icon
(
Icons
.
add
,
size:
18.0
),
label:
const
Text
(
'DISABLED'
),
onPressed:
null
,
),
],
),
const
RaisedButton
(
child:
const
Text
(
'DISABLED'
),
onPressed:
null
,
)
],
),
);
...
...
@@ -112,19 +146,84 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
Widget
buildFlatButton
()
{
return
new
Align
(
alignment:
const
Alignment
(
0.0
,
-
0.2
),
child:
new
ButtonBar
(
child:
new
Column
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
FlatButton
(
child:
const
Text
(
'FLAT BUTTON'
),
onPressed:
()
{
// Perform some action
},
new
ButtonBar
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
FlatButton
(
child:
const
Text
(
'FLAT BUTTON'
),
onPressed:
()
{
// Perform some action
},
),
const
FlatButton
(
child:
const
Text
(
'DISABLED'
),
onPressed:
null
,
),
],
),
new
ButtonBar
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
FlatButton
.
icon
(
icon:
const
Icon
(
Icons
.
add_circle_outline
,
size:
18.0
),
label:
const
Text
(
'FLAT BUTTON'
),
onPressed:
()
{
// Perform some action
},
),
new
FlatButton
.
icon
(
icon:
const
Icon
(
Icons
.
add_circle_outline
,
size:
18.0
),
label:
const
Text
(
'DISABLED'
),
onPressed:
null
,
),
],
),
],
),
);
}
Widget
buildOutlineButton
()
{
return
new
Align
(
alignment:
const
Alignment
(
0.0
,
-
0.2
),
child:
new
Column
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
ButtonBar
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
OutlineButton
(
child:
const
Text
(
'OUTLINE BUTTON'
),
onPressed:
()
{
// Perform some action
},
),
const
RaisedButton
(
child:
const
Text
(
'DISABLED'
),
onPressed:
null
,
),
],
),
new
ButtonBar
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
OutlineButton
.
icon
(
icon:
const
Icon
(
Icons
.
add
,
size:
18.0
),
label:
const
Text
(
'OUTLINE BUTTON'
),
onPressed:
()
{
// Perform some action
},
),
new
OutlineButton
.
icon
(
icon:
const
Icon
(
Icons
.
add
,
size:
18.0
),
label:
const
Text
(
'DISABLED'
),
onPressed:
null
,
),
],
),
const
FlatButton
(
child:
const
Text
(
'DISABLED'
),
onPressed:
null
,
)
],
),
);
...
...
This diff is collapsed.
Click to expand it.
examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart
View file @
11d81b11
...
...
@@ -7,7 +7,9 @@ import 'package:flutter/material.dart';
import
'../../gallery/demo.dart'
;
const
String
_checkboxText
=
'Checkboxes allow the user to select multiple options from a set.'
;
'Checkboxes allow the user to select multiple options from a set. '
'A normal checkbox
\'
s value is true or false and a tristate checkbox
\'
s '
'value can also be null.'
;
const
String
_checkboxCode
=
'selectioncontrols_checkbox'
;
...
...
@@ -64,6 +66,7 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
bool
checkboxValueA
=
true
;
bool
checkboxValueB
=
false
;
bool
checkboxValueC
;
int
radioValue
=
0
;
bool
switchValue
=
false
;
...
...
@@ -82,24 +85,40 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
new
Row
(
mainAxisSize:
MainAxisSize
.
min
,
children:
<
Widget
>[
new
Checkbox
(
value:
checkboxValueA
,
onChanged:
(
bool
value
)
{
setState
(()
{
checkboxValueA
=
value
;
});
}),
new
Checkbox
(
value:
checkboxValueB
,
onChanged:
(
bool
value
)
{
setState
(()
{
checkboxValueB
=
value
;
});
})
]
new
Checkbox
(
value:
checkboxValueA
,
onChanged:
(
bool
value
)
{
setState
(()
{
checkboxValueA
=
value
;
});
},
),
new
Checkbox
(
value:
checkboxValueB
,
onChanged:
(
bool
value
)
{
setState
(()
{
checkboxValueB
=
value
;
});
},
),
new
Checkbox
(
value:
checkboxValueC
,
tristate:
true
,
onChanged:
(
bool
value
)
{
setState
(()
{
checkboxValueC
=
value
;
});
},
),
],
),
new
Row
(
mainAxisSize:
MainAxisSize
.
min
,
children:
const
<
Widget
>[
// Disabled checkboxes
const
Checkbox
(
value:
true
,
onChanged:
null
),
const
Checkbox
(
value:
false
,
onChanged:
null
)
const
Checkbox
(
value:
false
,
onChanged:
null
),
const
Checkbox
(
value:
null
,
tristate:
true
,
onChanged:
null
),
]
)
]
...
...
This diff is collapsed.
Click to expand it.
examples/flutter_gallery/lib/gallery/example_code.dart
View file @
11d81b11
...
...
@@ -29,8 +29,45 @@ const RaisedButton(
child:
const
Text
(
'BUTTON TITLE'
),
onPressed:
null
);
// Create a button with an icon and a
// title.
new
RaisedButton
.
icon
(
icon:
const
Icon
(
Icons
.
add
,
size:
18.0
),
label:
const
Text
(
'BUTTON TITLE'
),
onPressed:
()
{
// Perform some action
},
);
// END
// START buttons_outline
// Create an outline button.
new
OutlineButton
(
child:
const
Text
(
'BUTTON TITLE'
),
onPressed:
()
{
// Perform some action
}
);
// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
const
OutlineButton
(
child:
const
Text
(
'BUTTON TITLE'
),
onPressed:
null
);
// Create a button with an icon and a
// title.
new
OutlineButton
.
icon
(
icon:
const
Icon
(
Icons
.
add
,
size:
18.0
),
label:
const
Text
(
'BUTTON TITLE'
),
onPressed:
()
{
// Perform some action
},
);
// END
// START buttons_flat
// Create a flat button.
...
...
@@ -123,9 +160,20 @@ new Checkbox(
onChanged:
(
bool
value
)
{
setState
(()
{
checkboxValue
=
value
;
}
);
});
});
},
);
// Create a tristate checkbox.
new
Checkbox
(
tristate:
true
,
value:
checkboxValue
,
onChanged:
(
bool
value
)
{
setState
(()
{
checkboxValue
=
value
;
});
},
);
// Create a disabled checkbox.
// Checkboxes are disabled when onChanged isn't
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment