How to achieve scrollable canvas in Flutter? - ios

I'm a experienced iOS developer, but completely new to the Flutter. Right now I'm facing a problem with ScrollView in Flutter.
What I want to achieve is building a large scrollable canvas. I did it on iOS before, you can see the screenshot here.
The canvas is a big UIScrollView, and each subview on the canvas is draggable, so I can place them at will. Even if the text is very long, I can scroll the canvas to see the full content. Now I need to do the same thing using Flutter.
Currently, I can only drag the text widgets in Flutter. But the parent widget is not scrollable. I know I need to use a scrollable widget in Flutter to achieve the same result, but I just can't make it work. Here's the code I currently have.
void main() {
//debugPaintLayerBordersEnabled = true;
//debugPaintSizeEnabled = true;
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.indigo,
),
home: new MyHomePage(title: 'Flutter Demo Drag Box'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: DragBox(Offset(0.0, 0.0)));
}
}
class DragBox extends StatefulWidget {
final Offset position; // widget's position
DragBox(this.position);
#override
_DragBoxState createState() => new _DragBoxState();
}
class _DragBoxState extends State<DragBox> {
Offset _previousOffset;
Offset _offset;
Offset _position;
#override
void initState() {
_offset = Offset.zero;
_previousOffset = Offset.zero;
_position = widget.position;
super.initState();
}
#override
Widget build(BuildContext context) {
return new Container(
constraints: BoxConstraints.expand(),
color: Colors.white24,
child: Stack(
children: <Widget>[
buildDraggableBox(1, Colors.red, _offset)
],
)
);
}
Widget buildDraggableBox(int boxNumber, Color color, Offset offset) {
print('buildDraggableBox $boxNumber !');
return new Stack(
children: <Widget>[
new Positioned(
left: _position.dx,
top: _position.dy,
child: Draggable(
child: _buildBox(color, offset),
feedback: _buildBox(color, offset),
//childWhenDragging: _buildBox(color, offset, onlyBorder: true),
onDragStarted: () {
print('Drag started !');
setState(() {
_previousOffset = _offset;
});
print('Start position: $_position}');
},
onDragCompleted: () {
print('Drag complete !');
},
onDraggableCanceled: (Velocity velocity, Offset offset) {
// update position here
setState(() {
Offset _offset = Offset(offset.dx, offset.dy - 80);
_position = _offset;
print('Drag canceled position: $_position');
});
},
),
)
],
);
}
Widget _buildBox(Color color, Offset offset, {bool onlyBorder: false}) {
return new Container(
child: new Text('Flutter widget',
textAlign: TextAlign.center,
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 25.0)),
);
}
}
Any suggestions or code samples would be really helpful to me.
PS: Please forget about the rulers on the screenshot, it's not the most important thing to me right now. I just need a big scrollable canvas now.

The below Code may help to resolve your problem it scroll the custom canvas in horizontal direction as you have shown in example image.
import 'package:flutter/material.dart';
class MyScroll extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Canvas Scroller'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new CustomPaint(
painter: new MyCanvasView(),
size: new Size(width*2, height/2),
),
),
),
);
}
}
class MyCanvasView extends CustomPainter{
#override
void paint(Canvas canvas, Size size) {
var paint = new Paint();
paint..shader = new LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
begin: Alignment.centerRight, end: Alignment.centerLeft).createShader(new Offset(0.0, 0.0)&size);
canvas.drawRect(new Offset(0.0, 0.0)&size, paint);
var path = new Path();
path.moveTo(0.0, size.height);
path.lineTo(1*size.width/4, 0*size.height/4);
path.lineTo(2*size.width/4, 2*size.height/4);
path.lineTo(3*size.width/4, 0*size.height/4);
path.lineTo(4*size.width/4, 4*size.height/4);
canvas.drawPath(path, new Paint()..color = Colors.yellow ..strokeWidth = 4.0 .. style = PaintingStyle.stroke);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}

Related

Keyboard not showing properly when text field is placed in sliver

I'm trying to create searchbar using Cupertino widgets and slivers.
Currently I have following structure:
CupertinoApp
CupertinoTabScaffold
CupertinoPageScaffold
CustomScrollView
SliverNavigationBar
SliverPersistentHeader
_SliverSearchBarDelegate
CupertinoTextField
SliverPersistentHeader has delegate, which is implemented in the following way:
class _SliverSearchBarDelegate extends SliverPersistentHeaderDelegate {
_SliverSearchBarDelegate({
#required this.child,
this.minHeight = 56.0,
this.maxHeight = 56.0,
});
final Widget child;
final double minHeight;
final double maxHeight;
#override
double get minExtent => minHeight;
#override
double get maxExtent => maxHeight;
#override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return SizedBox.expand(child: child);
}
#override
bool shouldRebuild(_SliverSearchBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
And the screen widget looks like this:
class CategoriesScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar( /* ... */ ),
SliverPersistentHeader(
delegate: _SliverSearchBarDelegate(
child: Container(
/* ... */
child: CupertinoTextField( /* ... */ ),
),
),
)
],
),
);
}
}
The problem is that when I focus in text field, it looks like keyboard is trying to show but then immediately hides. I was thinking that this behavior appears because of scrollview events, but adding ScrollController to CustomScrollView doesn't gave me any results (there was no scroll events while focusing text field).
I was also thinking that the problem appears only in simulator but on real device the behavior is same.
Here's the video demonstration of problem:
UPDATE: Thanks to Raja Jain I figured out that the problem is not in slivers or CategoriesScreen widget itself but in CupertinoTabScaffold in which this widget is wrapped. If I remove CupertinoTabScaffold and set CupertinoApp's home widget to CategoriesScreen widget directly, the problem goes away. Here's my main.dart here, hope it will help, butI don't know how because there's nothing special in it:
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoApp(
/* ... */
// home: CategoriesScreen(),
home: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
/* ... */
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.all, size: 20.0),
title: Text('Items'),
),
BottomNavigationBarItem(
icon: Icon(Icons.categories, size: 20.0),
title: Text('Categories'),
)
],
),
tabBuilder: (BuildContext tabBuilderContext, int index) {
return CategoriesScreen();
},
),
);
}
}
I copied your code and tried to run.Code is running fine with expected behaviour,Maybe you are rebuilding your widget somewhere while clicking on text field. I'm attaching the code which i tried and working fine.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Test'),
),
body: CupertinoPageScaffold(
child: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text("Demo"),
),
SliverPersistentHeader(
delegate: _SliverSearchBarDelegate(
child: Container(
height: 20.0,
width: 20.0,
child: CupertinoTextField(/* ... */),
),
),
)
],
),
),
);
}
}
class _SliverSearchBarDelegate extends SliverPersistentHeaderDelegate {
_SliverSearchBarDelegate({
#required this.child,
this.minHeight = 56.0,
this.maxHeight = 56.0,
});
final Widget child;
final double minHeight;
final double maxHeight;
#override
double get minExtent => minHeight;
#override
double get maxExtent => maxHeight;
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return SizedBox.expand(child: child);
}
#override
bool shouldRebuild(_SliverSearchBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
I just had a similar problem and what solved my issue was to use CupertinoTabView in the CupertinoTabScaffold's tabBuilder, like this:
tabBuilder: (BuildContext tabBuilderContext, int index) {
return CupertinoTabView(
builder: (context) => CategoriesScreen(),
);
},

How to fade-in a new screen from the bottom following the direction of a vertical drag action?

I need to navigate to a new screen with a fade-in animation from the bottom of the screen, following the direction of vertical drag on a custom material widget.
I have created two screens, Screen -1 and screen -2. On screen - 1, I have a Container widget. I have wrapped the widget inside a GestureDetector and I am trying Navigate to screen - 2 on vertical drag, which I am using GestureDetector.onVerticalDrag property.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/':(context) => ScreenOne(),
'/two': (context) => ScreenTwo(),
},
title: 'Screens',
);
}
}
class ScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen-1'),
),
body: GestureDetector(
onVerticalDragStart: (DragStartDetails details){
Navigator.pushNamed(context, '/two');
},
child: Container(
margin: EdgeInsets.all(8.0),
color: Colors.red,
),
),
);
}
}
class ScreenTwo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen-2'),
),
body: Center(
child: Text('Screen-2'),
),
);
}
}
Can you please help me get the expected transition. I am attaching a GIF for reference.
If you don't mind using PageView, this is much easier with it and Opacity widget. Here is the demo video.
import 'package:flutter/material.dart';
class TestView extends StatefulWidget {
#override
_TestViewState createState() => _TestViewState();
}
class _TestViewState extends State<TestView> {
PageController pageController;
double panPosition = 1; // dummy value prevents division with 0
double deviceHeight;
void updatePageState() {
setState(() {
panPosition =
pageController.position.pixels.abs(); // updates pan position
});
}
#override
void initState() {
// TODO: implement initState
super.initState();
pageController = PageController(
keepPage: true,
);
pageController
.addListener(updatePageState); // add listener to page controller.
}
#override
Widget build(BuildContext context) {
deviceHeight =
MediaQuery.of(context).size.height; //get device screen height
return Scaffold(
backgroundColor: Colors.white,
body: PageView(
controller: pageController,
scrollDirection: Axis.vertical, //vertical scroll
children: <Widget>[
Opacity(
// opacity handles the transition effect
opacity: 1 - (panPosition / deviceHeight),
//first screen opacity goes from 1 to 0
child: ScreenOne(),
),
Opacity(
opacity: (panPosition / deviceHeight),
//first screen opacity goes from 0 to 1
child: ScreenTwo(
title: "this title is from parent widget.",
),
)
],
),
);
}
}
class ScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen-1'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 96,
color: Colors.red,
)
],
),
);
}
}
class ScreenTwo extends StatelessWidget {
final String title;
const ScreenTwo({Key key, this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Text(title),
),
);
}
}

OverflowBox,the overflowed part cannot respond to the button?

I need to build a bottomNavigationBar with a vertical overflow TabBar item,
so I tried to use OverflowBox,it looks like useful.
but there is another problew,the overflowed part cannot respond to the button.
so what should I do make the GestureDetector effective?
or you have other ways to build a bottomNavigationBar like this?
thank you very much!
this is screen capture
this is main.dart:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'OverflowBox touch test'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
List<Color> _colors = [
Colors.blue,
Colors.green,
Colors.yellow,
];
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
String _tip = "";
TabController controller;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new TabBarView(
controller: controller,
children: <Widget>[
new Center(child: new Text("page 1")),
new Center(child: new Text("page 2")),
new Center(child: new Text("page 3")),
],
),
bottomNavigationBar: new Container(
height: 72.0,
alignment: Alignment.bottomCenter,
color: const Color.fromRGBO(45, 45, 45, 1.0),
child: new TabBar(
controller: controller,
indicatorWeight: 0.01,
tabs: <Widget>[
_getBarItem(0),
_getBarItem(1),
_getBarItem(2),
],
),
),
);
}
#override
void initState() {
super.initState();
controller = new TabController(length: 3, vsync: this);
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
Widget _getBarItem(int idx){
Widget ret = new Container(
width: 80.0,
height: idx==1?120.0:50.0,
color: _colors[idx],
);
if(idx==1){
ret = new OverflowBox(
maxHeight: double.infinity,
alignment: Alignment.bottomCenter,
child: new Container(
color: Colors.black,
child: new GestureDetector(
onTapDown: (x){
controller.animateTo(idx);
},
child: ret,
),
),
);
}
return ret;
}
}
Try to make your GestureDetector wrap your OverflowBox
Use this behavior on the Gesture Detector and then wrap your overflow with it.
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap(){..
)
You should use a Stack with a Positioned widget instead of an OverflowBox.
PS: Using functions that return widget should be avoided.
I can tell you the reason. OverflowBox widget layout is sizedByParent, so the size is 72. When hit test will ingore the pointer out the size. so the child widget overflowed part cannot respond to the button.

How to stop Multi-Drag in Flutter?

I am developing an application using drag and drop but I want only
one drag at a time on the screen or only one feedback is shown on the
screen. When I am using 2 fingers to drag to boxes both feedback are
shown on the screen. What I have done is if one drag is on the screen
then other boxes are not draggable but If you tap at the same time on
two boxes both box are draggable. How to stop these drags?
Image Example
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.indigo,
),
home: new MyHomePage(title: 'Flutter Demo Drag Box'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body:
new DragGame(), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class DragGame extends StatefulWidget {
#override
_DragGameState createState() => new _DragGameState();
}
class _DragGameState extends State<DragGame> {
int boxNumberIsDragged;
#override
void initState() {
boxNumberIsDragged = null;
super.initState();
}
#override
Widget build(BuildContext context) {
return new Container(
constraints: BoxConstraints.expand(),
color: Colors.grey,
child: new Stack(
children: <Widget>[
buildDraggableBox(1, Colors.red, new Offset(30.0, 100.0)),
buildDraggableBox(2, Colors.yellow, new Offset(30.0, 200.0)),
buildDraggableBox(3, Colors.green, new Offset(30.0, 300.0)),
],
));
}
Widget buildDraggableBox(int boxNumber, Color color, Offset offset) {
return new Draggable(
maxSimultaneousDrags: boxNumberIsDragged == null || boxNumber == boxNumberIsDragged ? 1 : 0,
child: _buildBox(color, offset),
feedback: _buildBox(color, offset),
childWhenDragging: _buildBox(color, offset, onlyBorder: true),
onDragStarted: () {
setState((){
boxNumberIsDragged = boxNumber;
});
},
onDragCompleted: () {
setState((){
boxNumberIsDragged = null;
});
},
onDraggableCanceled: (_,__) {
setState((){
boxNumberIsDragged = null;
});
},
);
}
Widget _buildBox(Color color, Offset offset, {bool onlyBorder: false}) {
return new Container(
height: 50.0,
width: 50.0,
margin: EdgeInsets.only(left: offset.dx, top: offset.dy),
decoration: BoxDecoration(
color: !onlyBorder ? color : Colors.grey,
border: Border.all(color: color)),
);
}
}
Are you looking for maxSimultaneousDrags?
https://docs.flutter.io/flutter/widgets/Draggable-class.html
Edit 1:
onDragStarted is fired only when user started moving the finger. What you need is onTap.
Edit 2:
Please change to onTap => onTapDown. Also use setState to reconstruct the two other widgets when one widget is "tapDowned". Tested on my device. See if this works for you. Good luck.
Widget buildDraggableBox(int boxNumber, Color color, Offset offset) {
return new GestureDetector(
child: Draggable(
maxSimultaneousDrags: boxNumberIsDragged == null || boxNumber == boxNumberIsDragged ? 1 : 0,
child: _buildBox(color, offset),
feedback: _buildBox(color, offset),
childWhenDragging: _buildBox(color, offset, onlyBorder: true),
onDragStarted: () {
setState((){
});
},
onDragCompleted: () {
setState((){
boxNumberIsDragged = null;
});
},
onDraggableCanceled: (_,__) {
setState((){
boxNumberIsDragged = null;
});
},
),
onTapDown: (_) {
setState(() {
boxNumberIsDragged = boxNumber;
});
)
}

Flutter - How to get a semitransparent blurring layer with a hole with soft edges

I want to create a screen for the coach mark. Idea is to blur and make darker everything except the region where is my icon located.
I could cut a circle with feather edges. But the icon on the background is also blurred.
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => new _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
_buildScaffold(),
CustomPaint(
child: Container(
constraints: BoxConstraints.expand(),
child: BackdropFilter(
filter: new ui.ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
child: Container(
decoration: new BoxDecoration(
color: Colors.grey[900].withOpacity(0.7)),
))),
foregroundPainter: CoachMarksPainter(),
),
]);
}
Widget _buildScaffold() {
return Scaffold(
appBar: AppBar(
title: Text("Hello"),
actions: <Widget>[
new IconButton(
onPressed: () => print("press"),
icon: new Icon(Icons.calendar_today),
),
PopupMenuButton<String>(
itemBuilder: (BuildContext context) {},
),
],
),
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage(
"http://www.mobileswall.com/wp-content/uploads/2015/03/640-Sunset-Beach-2-l.jpg"),
fit: BoxFit.cover))));
}
}
class CoachMarksPainter extends CustomPainter {
void paint(Canvas canvas, Size size) {
print("Paint size=$size canvas=${canvas.getSaveCount()}");
canvas.save();
Path path = Path()
..addOval(Rect.fromCircle(center: Offset(287.0, 52.0), radius: 25.0))
..addRect(new Rect.fromLTWH(
-10.0, -10.0, size.width + 20.0, size.height + 20.0))
//to have rect a bit larger than screen, so blurred edges won't be seen
..fillType = PathFillType.evenOdd;
Paint paint = Paint()
..blendMode = BlendMode.dstOut
..color = Colors.white.withOpacity(0.4)
..maskFilter = new MaskFilter.blur(
BlurStyle.normal, 2.0); //BoxShadow.convertRadiusToSigma(25.0)
canvas.drawPath(path, paint);
canvas.restore();
}
#override
bool shouldRepaint(CoachMarksPainter oldDelegate) => false;
#override
bool shouldRebuildSemantics(CoachMarksPainter oldDelegate) => false;
}
blurred background with a highlighted icon in a circle
Is it possible to use ImageFilter.blur for Canvas? I use MaskFilter, but it does not blur canvas as much as ImageFilter for BackdropFilter widget.
Ideally, I want to get a semitransparent blurring layer with a hole with soft edges.
P.S. I read this question but I need to invert it.
#Marica Hopefully this is doing what you want.
https://gist.github.com/slightfoot/76043f8f3fc4a8b20fc24c5a6f22b0a0
import 'dart:async';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Coach Mark Demo',
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffold = GlobalKey();
final GlobalKey<CoachMarkState> _calendarMark = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffold,
appBar: AppBar(
title: Text("Hello"),
actions: <Widget>[
CoachMark(
key: _calendarMark,
id: 'calendar_mark',
text: 'Tap here to use the Calendar!',
child: GestureDetector(
onLongPress: () => _calendarMark.currentState.show(),
child: IconButton(
onPressed: () => print('calendar'),
icon: Icon(Icons.calendar_today),
),
),
),
PopupMenuButton<String>(
itemBuilder: (BuildContext context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: 'reset',
child: Text('Reset'),
),
];
},
onSelected: (String value) {
if (value == 'reset') {
_calendarMark.currentState.reset();
_scaffold.currentState.showSnackBar(SnackBar(
content: Text('Hot-restart the app to see the coach-mark again.'),
));
}
},
),
],
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("http://www.mobileswall.com/wp-content/uploads/2015/03/640-Sunset-Beach-2-l.jpg"),
fit: BoxFit.cover),
),
),
);
}
}
class CoachMark extends StatefulWidget {
const CoachMark({
Key key,
#required this.id,
#required this.text,
#required this.child,
}) : super(key: key);
final String id;
final String text;
final Widget child;
#override
CoachMarkState createState() => CoachMarkState();
}
typedef CoachMarkRect = Rect Function();
class CoachMarkState extends State<CoachMark> {
_CoachMarkRoute _route;
String get _key => 'mark_${widget.id}';
#override
void initState() {
super.initState();
test().then((bool seen) {
if (seen == false) {
show();
}
});
}
#override
void didUpdateWidget(CoachMark oldWidget) {
super.didUpdateWidget(oldWidget);
_rebuild();
}
#override
void reassemble() {
super.reassemble();
_rebuild();
}
#override
void dispose() {
dismiss();
super.dispose();
}
#override
Widget build(BuildContext context) {
_rebuild();
return widget.child;
}
void show() {
if (_route == null) {
_route = _CoachMarkRoute(
rect: () {
final box = context.findRenderObject() as RenderBox;
return box.localToGlobal(Offset.zero) & box.size;
},
text: widget.text,
padding: EdgeInsets.all(4.0),
onPop: () {
_route = null;
mark();
},
);
Navigator.of(context).push(_route);
}
}
void _rebuild() {
if (_route != null) {
WidgetsBinding.instance.addPostFrameCallback((_) {
_route.changedExternalState();
});
}
}
void dismiss() {
if (_route != null) {
_route.dispose();
_route = null;
}
}
Future<bool> test() async {
return (await SharedPreferences.getInstance()).getBool(_key) ?? false;
}
void mark() async {
(await SharedPreferences.getInstance()).setBool(_key, true);
}
void reset() async {
(await SharedPreferences.getInstance()).remove(_key);
}
}
class _CoachMarkRoute<T> extends PageRoute<T> {
_CoachMarkRoute({
#required this.rect,
#required this.text,
this.padding,
this.onPop,
this.shadow = const BoxShadow(color: const Color(0xB2212121), blurRadius: 8.0),
this.maintainState = true,
this.transitionDuration = const Duration(milliseconds: 450),
RouteSettings settings,
}) : super(settings: settings);
final CoachMarkRect rect;
final String text;
final EdgeInsets padding;
final BoxShadow shadow;
final VoidCallback onPop;
#override
final bool maintainState;
#override
final Duration transitionDuration;
#override
bool didPop(T result) {
onPop();
return super.didPop(result);
}
#override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
Rect position = rect();
if (padding != null) {
position = padding.inflateRect(position);
}
position = Rect.fromCircle(center: position.center, radius: position.longestSide * 0.5);
final clipper = _CoachMarkClipper(position);
return Material(
type: MaterialType.transparency,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTapDown: (d) => Navigator.of(context).pop(),
child: IgnorePointer(
child: FadeTransition(
opacity: animation,
child: Stack(
children: <Widget>[
ClipPath(
clipper: clipper,
child: BackdropFilter(
filter: ui.ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
child: Container(
color: Colors.transparent,
),
),
),
CustomPaint(
child: SizedBox.expand(
child: Center(
child: Text(text,
style: const TextStyle(
fontSize: 22.0,
fontStyle: FontStyle.italic,
color: Colors.white,
)),
),
),
painter: _CoachMarkPainter(
rect: position,
shadow: shadow,
clipper: clipper,
),
),
],
),
),
),
),
);
}
#override
bool get opaque => false;
#override
Color get barrierColor => null;
#override
String get barrierLabel => null;
}
class _CoachMarkClipper extends CustomClipper<Path> {
final Rect rect;
_CoachMarkClipper(this.rect);
#override
Path getClip(Size size) {
return Path.combine(PathOperation.difference, Path()..addRect(Offset.zero & size), Path()..addOval(rect));
}
#override
bool shouldReclip(_CoachMarkClipper old) => rect != old.rect;
}
class _CoachMarkPainter extends CustomPainter {
_CoachMarkPainter({
#required this.rect,
#required this.shadow,
this.clipper,
});
final Rect rect;
final BoxShadow shadow;
final _CoachMarkClipper clipper;
void paint(Canvas canvas, Size size) {
final circle = rect.inflate(shadow.spreadRadius);
canvas.saveLayer(Offset.zero & size, Paint());
canvas.drawColor(shadow.color, BlendMode.dstATop);
canvas.drawCircle(circle.center, circle.longestSide * 0.5, shadow.toPaint()..blendMode = BlendMode.clear);
canvas.restore();
}
#override
bool shouldRepaint(_CoachMarkPainter old) => old.rect != rect;
#override
bool shouldRebuildSemantics(_CoachMarkPainter oldDelegate) => false;
}
I'm not sure I understand the question. It seems that what you want would be achievable by using 3 layers in a stack. Lowest is your background, second is the darker frosted blur and put your icon on top.
Am I misunderstanding something?

Resources