New Item Indicator In Flutter :
New item Indicator In Flutter : New Item Indicator In Flutter Name You may have understood what this flutter tutorial is about today. You can use the New Item Indicator to display a new arrival. If you are developing an online shopping app, you must use the compulsory New Item Indicator because if you want to display a discount, you can use the New Item Indicator. You can use Item Indicator
In this filter tutorial, I will explain how to design a New Item Indicator flutter.
Generally New Item indicator in flutter is used for indicates the new arrival item or display any special discount price etc.
Screenshot :
main.dart
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Corner Decoration')),
body: ListView(children: <Widget>[
Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 12, left: 12.0),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('1:45'),
SizedBox(height: 2),
Text('2:30')
]))),
Flexible(
child: Stack(children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 12, bottom: 12, left: 10, right: 40),
child: Stack(children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(children: <Widget>[
Flexible(
child: Padding(
padding:
EdgeInsets.only(right: 18.0),
child: Text(
'Title: Flutter Tutorial')))
]),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 6.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: <Widget>[
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape:
BoxShape.circle,
color: Colors.blue)),
SizedBox(width: 10),
Flexible(
child: Text(
'Flutter Tutorial provide the best tutorials of flutter, dart, java, J2EE and kotlin. Flutter tutorial is cross platform language. Flutter tutorial provide customize widgets etc')),
SizedBox(height: 22.0)
]))
])
])
])),
Positioned(
right: 10,
bottom: 10,
child: Icon(Icons.favorite_border,
color: Theme.of(context).accentColor)),
Positioned(
top: 0, right: 0, child: Indicator(compact: false))
]))
]))
])));
}
}
class Indicator extends StatelessWidget {
const Indicator({
Key key,
@required this.compact,
}) : super(key: key);
final bool compact;
@override
Widget build(BuildContext context) {
return Visibility(
visible: !compact,
child: _Triangle(color: Colors.blue),
);
}
}
class _Triangle extends StatelessWidget {
const _Triangle({
Key key,
this.color,
}) : super(key: key);
final Color color;
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: _ShapesPainter(color),
child: Container(
height: 50,
width: 50,
child: Center(
child: Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 16),
child: Transform.rotate(
angle: math.pi / 4,
child: Text('New Post',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 9,
fontWeight: FontWeight.w800)))))));
}
}
class _ShapesPainter extends CustomPainter {
final Color color;
_ShapesPainter(this.color);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
paint.color = color;
var path = Path();
path.lineTo(size.width, 0);
path.lineTo(size.height, size.width);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
