Last active
February 20, 2020 16:14
-
-
Save Levi-Lesches/ddc37f0ba0bbbfb016380ae6bf1ffe49 to your computer and use it in GitHub Desktop.
Lost and Found page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "package:flutter_web/material.dart"; | |
import "package:flutter_web/cupertino.dart"; | |
import "package:flutter_web_ui/ui.dart" as ui; | |
// Lines like these are comments (only read by people, ignored by computer) | |
/// Lines like these (three slashes) explain only the class/function/variable right underneath them | |
// Any part of a comment in [brackets] are either defined here in this file or | |
// can be searched for at https://api.flutter.dev | |
/// This is a [StatefulWidget]. The gist is that this widget can keep track of variables (ie, "state"), | |
/// and change how it looks when those variables change. | |
/// | |
/// Here, we will use a variable to keep track of whether the tile is open or not. | |
class Tile extends StatefulWidget { | |
/// This method (method = function belonging to an object -- in this case, [StatefulWidget]s) tells Flutter | |
/// how to understand the state (variables) of this widget | |
/// | |
/// We define [TileState] later. | |
@override | |
TileState createState() => TileState(); | |
} | |
/// This is a State object. State objects connect state (variables) to a Widget. | |
/// All state objects need to extend [State] and refer to the widget they control. | |
class TileState extends State<Tile> { | |
/// Whether this [Tile] should be open or not. | |
/// Starts off closed. | |
bool open = false; | |
/// This method tells Flutter how the widget should look. This is identical to the build | |
/// method of [StatelessWidget], except here we can use the [setState] method of [StatefulWidget] | |
/// to tell Flutter we are changing the state of the widget, and the widget will reload | |
/// itself with the new values. | |
@override | |
Widget build(BuildContext context) => ExpansionPanelList( // list of [ExpansionPanel]s. | |
children: [ | |
ExpansionPanel( // a panel that can open and close | |
isExpanded: open, // whether it is opened or not. Can be changed by changing [open]. | |
headerBuilder: (_, __) => ListTile( // generic layout Widget -- really helpful | |
title: Text("Lost"), | |
leading: IconButton( | |
icon: Icon(Icons.add), | |
// change [open] to its opposite (!open = "opposite of [open]") | |
// uses [setState] to tell Flutter to reload the widget. | |
onPressed: () => setState(() => open = !open) | |
), | |
), | |
body: ListTile( // body is the thing that expands | |
title: Text("Hello") | |
) | |
), | |
] | |
); | |
} | |
void main() async { | |
// This function needs to be called on WEB only! | |
await ui.webOnlyInitializePlatform(); | |
// Actually run the app | |
runApp( | |
MaterialApp( | |
home: Scaffold( | |
appBar: AppBar(title: Text("Lost and found")), | |
body: ListView( // scrollable list | |
children: [ // elements of the list | |
Tile() // an expanding [Tile], as defined above | |
] | |
) | |
) | |
) | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment