User input/Graphical: Difference between revisions

=={{header|Dart}}==

{{libheader|Flutter}}

Displays a text field, button and output label

<lang javascript>import 'package:flutter/material.dart';

main() => runApp( OutputLabel() );

class OutputLabel extends StatefulWidget {

@override

_OutputLabelState createState() => _OutputLabelState();

}

class _OutputLabelState extends State<OutputLabel> {

String output = "output"; // This will be displayed in an output text field

TextEditingController _inputController = TextEditingController(); // Allows us to get the text from a text field

@override

Widget build( BuildContext context ) {

return MaterialApp(

debugShowCheckedModeBanner: false, // Disable debug banner in top right

home: Scaffold ( // Scaffold provides a layout for the app

body: Center ( // Everything in the center widget will be centered

child: Column ( // All the widgets will be in a column

children: <Widget> [

SizedBox( height: 25 ), // Space between top and text field

TextField ( // Input Text Field

controller: _inputController, // Add input controller so we can grab text

textAlign: TextAlign.center, // Center text

decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Enter a string...'), // Border and default text

),

FlatButton ( // Submit Button

onPressed: () { // On pressed Callback for button

setState( () {

output = 'output: ${_inputController.text}\nnumber: 75000'; // Grabs the text from the input controller and changes the string

});

},

child: Text('Submit Text'), // Button Text

color: Colors.blue[400] // button color

),

Text( output ) // displays output

]

)

)

)

);

}

}

</lang>