How to use Flutter most usable Widgets | Flutter tutorial

We need some basic widgets for creating our first flutter app. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description. Here we dicuss some basic widgets for creating the flutter application.

1. Text Class Widget : –

Text class is like a label in android and iOS. For use this we need to create text class object and assign the propertis and text into them. The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ListViewPractice</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{
  Widget build(BuildContext context) {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Container(
      child: <span class="hljs-keyword">new</span> Text( <span class="hljs-string">"data1 one"</span>, textAlign:  TextAlign.end,
      textDirection: TextDirection.rtl,
      textScaleFactor: <span class="hljs-number">2.0</span>,
      overflow: TextOverflow. clip,
      style: <span class="hljs-keyword">new</span> TextStyle(
         color: Colors.red[<span class="hljs-number">500</span>],
         fontSize: <span class="hljs-number">30.0</span>,
         wordSpacing: <span class="hljs-number">15.0</span>,
         letterSpacing: <span class="hljs-number">2.0</span>,
         fontWeight: FontWeight.bold,
         decoration: TextDecoration.underline,
         decorationColor: Colors.green,
         decorationStyle: TextDecorationStyle.solid),
         softWrap:  <span class="hljs-keyword">true</span>,
      )
    );
  }
}

2. IconButton class : –

An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ListViewPractice</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{
   <span class="hljs-annotation">@override</span>
  Widget build(BuildContext context) {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Scaffold(
      body: <span class="hljs-keyword">new</span> Center(
        child: <span class="hljs-keyword">new</span> Container(
          width: <span class="hljs-number">60.0</span>,
          height: <span class="hljs-number">60.0</span>,
          color: Colors.red,
          child: <span class="hljs-keyword">new</span> IconButton(
            highlightColor: Colors.blue,
            alignment: Alignment.center,
            splashColor: Colors.green,
            disabledColor: Colors.purple,
            padding: <span class="hljs-keyword">new</span> EdgeInsets.all(<span class="hljs-number">0.0</span>),
            icon: <span class="hljs-keyword">new</span> Icon(Icons.add_a_photo), onPressed: ()=&gt;{},),
        ),
      ),
    );
  }
}

<span class="hljs-keyword">void</span> setState() {
  <span class="hljs-built_in">print</span>(<span class="hljs-string">"Button Press"</span>);
}

Download Demo From Here 

Related Post

Java If-else Statement Java If-else Statement The Java if statement is used to test the condition. It checks boolean condition: true or false. For example, if a number i...
Firebase Push notification | Swift tutorial Push Notification by firebase in IOS.For Firebase Push notification we need to have paid apple developer account. You need to Enroll into the Apple D...
Java Operators Java Operators An operator is used to perform an operation over one or more operands. It is a character that represents an action, for example * is a...
UIPopOverPresentationController In Swift UIPopOverPresentationController UIPopOverViewController in swift is writen in swift 3.1 and Use the xcode Version 8.3.2. For use this import the Pop...
New features in XCode 10 Supported Configurations Xcode 10 beta requires a Mac running macOS 10.13.4 or later Xcode 10 beta includes SDKs for iOS 12, watchOS 5, macOS ...
Create Firebase single Page Website Create firebase single page Website tutorial In this tutorial we are study how to create single page website by the use of firebase hosting its very ...

Leave a Reply

Your email address will not be published. Required fields are marked *