Visible widget<\/h3>\n\n\n\n
The visible widgets are related to the user input and output data. Some of the important types of this widget are:<\/p>\n\n\n\n
Text<\/strong><\/p>\n\n\n\n A Text widget holds some text to display on the screen. We can align the text widget by using textAlign<\/strong> property, and style property allow the customization of Text that includes font, font weight, font style, letter spacing, color, and many more. We can use it as like below code snippets.<\/a><\/a><\/a><\/p>\n\n\n\n Button<\/strong><\/p>\n\n\n\n This widget allows you to perform some action on click. Flutter does not allow you to use the Button widget directly; instead, it uses a type of buttons like a FlatButton<\/strong> and a RaisedButton<\/strong>. We can use it as like below code snippets.<\/a><\/a><\/a><\/p>\n\n\n\n <\/p>\n\n\n\n In the above example, the onPressed<\/strong> property allows us to perform an action when you click the button, and elevation<\/strong> property is used to change how much it stands out.<\/p>\n\n\n\n Image<\/strong><\/p>\n\n\n\n This widget holds the image which can fetch it from multiple sources like from the asset folder or directly from the URL. It provides many constructors for loading image, which are given below:<\/p>\n\n\n\n To add an image in the project, you need first to create an assets folder where you keep your images and then add the below line in pubspec.yaml<\/strong> file.<\/a><\/a><\/a><\/p>\n\n\n\n Now, add the following line in the dart file.<\/a><\/a><\/a><\/p>\n\n\n\n The complete source code for adding an image is shown below in the hello world<\/strong> example.<\/a><\/a><\/a><\/p>\n\n\n\n <\/p>\n\n\n\n When you run the app, it will give the following output.<\/p>\n\n\n\n Icon<\/strong><\/p>\n\n\n\n This widget acts as a container for storing the Icon in the Flutter. The following code explains it more clearly.<\/a><\/a><\/a><\/p>\n\n\n\n <\/p>\n\n\n\n The invisible widgets are related to the layout and control of widgets. It provides controlling how the widgets actually behave and how they will look onto the screen. Some of the important types of these widgets are:<\/p>\n\n\n\n Column<\/strong><\/p>\n\n\n\n A column widget is a type of widget that arranges all its children’s widgets in a vertical alignment. It provides spacing between the widgets by using the mainAxisAlignment<\/strong> and crossAxisAlignment<\/strong> properties. In these properties, the main axis is the vertical axis, and the cross axis is the horizontal axis.<\/p>\n\n\n\n Example<\/strong><\/p>\n\n\n\n The below code snippets construct two widget elements vertically.<\/a><\/a><\/a><\/p>\n\n\n\n Row<\/strong><\/p>\n\n\n\n The row widget is similar to the column widget, but it constructs a widget horizontally rather than vertically. Here, the main axis is the horizontal axis, and the cross axis is the vertical axis.<\/p>\n\n\n\n Example<\/strong><\/p>\n\n\n\n The below code snippets construct two widget elements horizontally.<\/a><\/a><\/a><\/p>\n\n\n\n <\/p>\n\n\n\n Center<\/strong><\/p>\n\n\n\n This widget is used to center the child widget, which comes inside it. All the previous examples contain inside the center widget.<\/p>\n\n\n\n Example<\/strong><\/a><\/a><\/a><\/p>\n\n\n\n <\/p>\n\n\n\n Padding<\/strong><\/p>\n\n\n\n This widget wraps other widgets to give them padding in specified directions. You can also provide padding in all directions. We can understand it from the below example that gives the text widget padding of 6.0 in all directions.<\/p>\n\n\n\n Example <\/strong>:<\/a><\/a><\/a><\/p>\n\n\n\n Scaffold<\/strong><\/p>\n\n\n\n This widget provides a framework that allows you to add common material design elements like AppBar, Floating Action Buttons, Drawers, etc.<\/p>\n\n\n\n Stack<\/strong><\/p>\n\n\n\n It is an essential widget, which is mainly used for overlapping<\/strong> a widget, such as a button on a background gradient.<\/p>\n","protected":false},"excerpt":{"rendered":" We can split the Flutter widget into two categories: Visible (Output and Input) Invisible (Layout and Control) Visible widget The visible widgets are related to the user input and output data. Some of the important types of this widget are: Text A Text widget holds some text to display on the screen. We can align […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[675],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/1981"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=1981"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/1981\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=1981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=1981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=1981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}new Text( \n'Hello, Javatpoint!', \ntextAlign: TextAlign.center, \nstyle: new TextStyle(fontWeight: FontWeight.bold), \n) <\/code><\/pre>\n\n\n\n\/\/FlatButton Example \nnew FlatButton( \n child: Text(\"Click here\"), \n onPressed: () { \n \/\/ Do something here \n }, \n), \n \n\/\/RaisedButton Example \nnew RaisedButton( \n child: Text(\"Click here\"), \n elevation: 5.0, \n onPressed: () { \n \/\/ Do something here \n }, \n), <\/code><\/pre>\n\n\n\nclass MyHomePage extends StatelessWidget { \n MyHomePage({Key key, this.title}) : super(key: key); \n \/\/ This widget is the home page of your application. \n final String title; \n \n @override \n Widget build(BuildContext context) { \n return Scaffold( \n appBar: AppBar( \n title: Text(this.title), \n ), \n body: Center( \n child: Image.asset('assets\/computer.png'), \n ), \n ); \n } \n} <\/code><\/pre>\n\n\n\n![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-widgets-1.png\")
<\/figure>\n\n\n\nnew Icon( \n Icons.add, \n size: 34.0, \n) <\/code><\/pre>\n\n\n\nInvisible widget<\/h3>\n\n\n\n
new Column( \n mainAxisAlignment: MainAxisAlignment.center, \n children: <Widget>[ \n new Text( \n \"VegElement\", \n ), \n new Text( \n \"Non-vegElement\" \n ), \n ], \n), <\/code><\/pre>\n\n\n\nnew Row( \n mainAxisAlignment: MainAxisAlignment.spaceEvenly, \n children: <Widget>[ \n new Text( \n \"VegElement\", \n ), \n new Text( \n \"Non-vegElement\" \n ), \n ], \n), <\/code><\/pre>\n\n\n\nCenter( \n child: new clumn( \n mainAxisAlignment: MainAxisAlignment.spaceEvenly, \n children: <Widget>[ \n new Text( \n \"VegElement\", \n ), \n new Text( \n \"Non-vegElement\" \n ), \n ], \n ), \n), <\/code><\/pre>\n\n\n\nPadding( \n padding: const EdgeInsets.all(6.0), \n child: new Text( \n \"Element 1\", \n ), \n), <\/code><\/pre>\n\n\n\n