Text and Color

https://docs.flutter.io/flutter/painting/TextStyle-class.html

Text Style Class

Text(
style: TextStyle(fontStyle: FontStyle.italic),
),

Background Color
Add container and add color

    child: new Container(
      width: 80.0,
      height: 80.0,
      margin: new EdgeInsets.all(10.0),
      color: Colors.orange,),
https://docs.flutter.io/flutter/dart-ui/Color-class.html
An immutable 32 bit color value in ARGB format.
Color c = const Color(0xFF42A5F5);
Color c = const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
Color c = const Color.fromARGB(255, 66, 165, 245);
Color c = const Color.fromRGBO(66, 165, 245, 1.0);
Color c1 = const Color(0xFFFFFF); // fully transparent white (invisible)
Color c2 = const Color(0xFFFFFFFF); // fully opaque white (visible)
https://docs.flutter.io/flutter/dart-ui/Color/Color.fromARGB.html

Construct a color from the lower 8 bits of four integers.


    

  • a is the alpha value, with 0 being transparent and 255 being fully opaque.
    • 

  • r is red, from 0 to 255.
    • 

  • g is green, from 0 to 255.
    • 

  • b is blue, from 0 to 255.
    •

Comments

Post a Comment

Popular posts from this blog

Flutter Widget 101 Part 1 (Basic of Flutters, Layouts, Rows and Columns)

Image
1. What every programme starts with void main() => runApp( new MyApp()); "=>" is an operator and it  denotes   { return  expr ; } . () denotes method runApp will run MyApp() which is a widget. Besides running MyApp(), you can also play with runApp() function by doing the following: new Text(). Do remember to include the TextDirection. Text will appear on the top left hand corner of the screen. void main() { runApp( new Text( 'Hello World' ,textDirection: TextDirection. ltr ,)); } Make it centralised in the center through the following. void main() => runApp( new Center( child: new Text( 'Hello World' ,textDirection: TextDirection. ltr ,) ) ); 2.Declaring App/Widget to be run in runApp() void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return null ; } } extends is the inheriting of...
Read more

Flutter Widget 101 Part 2 (List and Stack)

1. List For type of list : Function (Why?) Small List: ListView (Create all at once) Large List: ListView.itembuilder (Create item as they are scrolled onto screen) What is ListView.itembuilder : Way to make list of Widgets/Children on demand. Widget are not static, can be called multiple times based on itemCount and return different widget at each call. Made up of ItemCount and ItemBuilder. ItemCo unt: decide how many times callback function of ItemBuilder is called Based on code below, itemBuilder would be called back 4 times (itemCount is equivalent to length of list) Why? to estimate maximum scroll extent ItemBuilder : Consist of Context and Index Abstract of IndexedWidgetBuilder, signature for function that create Widget for a given index. Index can be used to indicate location. Link to solution to position of list lost after bottom navigation. Index issue List<String> litems = ["1","2","Third","4"];...
Read more

Animation Class: AppBar and Tabbar

App Bar https://flutter.io/docs/catalog/samples/basic-app-bar https://material.io/design/components/app-bars-top.html#theming https://docs.flutter.io/flutter/material/AppBar-class.html The AppBar displays the toolbar widgets leading title actions bottom   TabBar . Declaring new method inside widget by (){}; void main(){ runApp( new MaterialApp(home: new AppTest1())); } class AppTest1 extends StatefulWidget { @override _AppTest1State createState() => _AppTest1State(); } class _AppTest1State extends State<AppTest1> { String bodyText = " " ; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( backgroundColor: Colors. red , leading: new Icon (Icons. laptop_chromebook ), title: new Text( "Appbar Title" ), //centerTitle: true, //titleSpacing: 80.0, elevation: 10.00 , actions: <Widget>[ new IconButton(icon: new Icon(...
Read more