Want to drawing a rectangle in bottom of Flutter app? Follows the code in which the rectangle is in the bottom of screen:
|
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import 'package:flutter/material.dart'; import 'dart:ui' as ui; void main() { runApp(new MaterialApp(home: new HomePage())); } class HomePage extends StatefulWidget { @override HomePageState createState() => new HomePageState(); } class HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { final ui.Size logicalSize = MediaQuery.of(context).size; final double _width = logicalSize.width; final double _height = logicalSize.height; double _rectHeight = 50.0; return new Scaffold( body: new Stack( children: <Widget>[ new Positioned( bottom: 0.0, left: 0.0, top: _height - _rectHeight, right: 0.0, child: new CustomPaint( painter: new Sky(_width, _rectHeight), child: new Text('$_width'), ) ), ] ) ); } } class Sky extends CustomPainter { final double _width; final double _rectHeight; Sky(this._width, this._rectHeight); @override void paint(Canvas canvas, Size size) { canvas.drawRect( new Rect.fromLTRB( 0.0, 0.0, this._width, _rectHeight ), new Paint()..color = new Color(0xFF0099FF), ); } @override bool shouldRepaint(Sky oldDelegate) { return false; } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.