I want to open new page when I swipe the circle in the middle of the screen. that is when I swipe blue circle left a new page should open and when I swipe right another new page should open.
Similarly when I swipe pink circle bottom another new page should open
Here is my code:
import 'package:flutter/material.dart';
class FirstRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 300.0,
width: 150.0,
child: Stack(
children: <Widget>[
Positioned(
top: 25,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.lightBlue,
),
),
),
Positioned(
bottom: 25,
child: Opacity(
opacity: 0.45,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.pinkAccent,
),
),
),
),
],
),
),
),
);
}
}
wrap Positioned() with SwipeDetector() Widget
Have a look at this example
SwipeDetector(
onSwipeRight: () {
//push new page
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new YourNewPage()));
},
child: //Your circle here
Positioned(
top: 25,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.lightBlue,
),
),
),
)
Related
Below is a simple view of my code. It has two stack elements and both contain clickable content. the top element covers the bottom element, I can't click on the bottom element. what should I do?
`
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
///decoration
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth,
child: Stack(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.3,
///decoration
///child: content
///THIS IS FIXED CONTENT. LIKE AN 'HEADER'
///clickable contents here
),
SingleChildScrollView(
child: Container(
margin: EdgeInsets.only(top: SizeConfig.screenHeight! * 0.25),
constraints: BoxConstraints(
minHeight: SizeConfig.screenHeight! * 0.75,
maxHeight: double.infinity,
),
///decoration and child, content
///THIS IS CONTENT SIDE FOR PAGE.
///this is scrollable and when scrolling up it goes above the header, continues up
///looks like DraggableScrollableSheet
//////clickable contents here
),
)
],
),
),
),
);
}
`
IgnorePointer, AbsorbPointer etc. i tryed but i cant solve it.
thats my workaround below. its background for flexibleSpace of CustomScrollView Appbar.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
//color: HTKColors.the_green_color,
///decoration
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth,
child: Stack(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.3,
///decoration
),
CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: SizeConfig.screenHeight! * 0.25,
backgroundColor: Colors.transparent,
leading: const SizedBox(),
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.none,
background: SizedBox(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.25,
///my bottom element (header)
),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(
constraints: BoxConstraints(
minHeight: SizeConfig.screenHeight! * 0.75,
maxHeight: double.infinity,
),
///draggable top element
),
]),
),
],
),
],
),
),
),
);
}
This is exactly what I want:
The green area can reach infinite length and can be scrolled. when i scroll up should be able to go above the red area. and if I didn't scroll the green area and I can see the red area; I should be able to click on the elements in the red area.
sample code here:
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Column(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.25,
color: Colors.red,
///clickable elements here
),
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.75,
color: Colors.transparent
),
],
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight! * 0.25,
color: Colors.transparent,
),
Container(
width: SizeConfig.screenWidth,
constraints: BoxConstraints(
minHeight: SizeConfig.screenHeight! * 0.75,
maxHeight: double.infinity,
),
///this elemend can be infinitely long by content
color: Colors.green
///clickable elements here
),
],
),
),
],
),
),
);
}
#eamirho3in
I'm having issue while making the dashboard for my WebApp. I'm trying to make my webApp responsive. But not able to make it. Here is the image with the code for what I tried.
import 'package:flutter/material.dart';
class MyHomeScreen extends StatefulWidget {
const MyHomeScreen({super.key});
#override
State<MyHomeScreen> createState() => _MyHomeScreenState();
}
class _MyHomeScreenState extends State<MyHomeScreen> {
List<Widget> customWidgetList = [
Container(
height: 100,
width: 200,
color: Colors.grey.shade200,
),
Container(
height: 300,
width: 200,
color: Colors.grey.shade200,
),
Container(
height: 100,
width: 200,
color: Colors.grey.shade200,
),
Container(
height: 100,
width: 200,
color: Colors.grey.shade200,
),
Container(
height: 200,
width: 200,
color: Colors.grey.shade200,
),
Container(
height: 100,
width: 200,
color: Colors.grey.shade200,
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Responsiveness')),
body: Wrap(
spacing: 2.0,
runSpacing: 2.0,
clipBehavior: Clip.antiAlias,
children: customWidgetList,
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}
Result of above code :
Where as I want to fill all the empty spaces. Here is the image of what I want to do it.
Simple answer is to add direction: Axis.vertical to Wrap widget.
The correct answer is to create your own LayoutBuilder and calculate for each Container its correct position.
The easiest is to use https://pub.dev/packages/flutter_staggered_grid_view
I have an issue about transform.translate/transform widgets. My ui is working very well but after i added a button of transform's child, the onPressed is not working.
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
width: size.width,
height: size.height,
color: Colors.white,
child: Stack(
children: [
Positioned(
right: 30,
bottom: 30,
child: Stack(
children: [
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation!.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation!.value))
..scale(degOneTranslationAnimation!.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors.blue,
width: 50,
height: 60,
icon: Icon(Icons.camera_alt_outlined),
onClick:() => print('tap button'),
),
),
),
Thanks a lot.
the only we need to do is add .call() to the end of the function to be void.
onPressed: ()=>onPressed to onPressed: ()=>onPressed.call()
I am trying to add a header card which will be displayed on the upper-left edge of a flutter card, so far I haven't been able to achieve that. This is an example of what I want
Being new to flutter, I didn't know there was a Stack widget. The solution is to stack two cards wrapped in Positioned widgets.
class SummaryCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
left: 0,
top: 40,
height: 200,
width: 350,
child: Card(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
),
),
Positioned(
left: 20,
top: 0,
height: 100,
width: 100,
child: Card(
color: Colors.green,
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
),
),
],
);
}
}
You need to wrap header card with Align Widget.
Here is a full code:
class Cards extends StatefulWidget {
#override
_CardsState createState() => _CardsState();
}
class _CardsState extends State<Cards> {
#override
Widget build(BuildContext context) {
return Container(
height: 200,
width: 200,
child: Card(
elevation: 20,
child: Align(
alignment: Alignment.topLeft,
child: Container(
width:100,
height: 60,
child: Card(
elevation: 10,
child: Text("header"),
),
),
),
),
);
}
}
Containers are just for height and width control.
And here is a screenshot:
I want to achieve an effect similar to this one:
Here's what I have: (Blue container is hidden below the appBar)
And this is my current code:
Widget build(BuildContext context) {
return Scaffold(
appBar: GradesAppBar(
title: "Grades",
gradientBegin: Colors.red[200],
gradientEnd: Colors.red,
),
body: Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: -20,
left: MediaQuery.of(context).size.width / 2 - 150,
child: Container(
color: Colors.blue,
width: 300,
height: 60,
),
),
],
),
);
}
The GradesAppBar is a Container with boxShadow, borderRadius and gradient decoration.
When you're using stack to achieve this UI approach you should remove the AppBar and make it like this :-
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
overflow: Overflow.visible,
children: <Widget>[
GradesAppBar(
title: "Grades",
gradientBegin: Colors.red[200],
gradientEnd: Colors.red,
),
Positioned(
top: -20,
left: MediaQuery.of(context).size.width / 2 - 150,
child: Container(
color: Colors.blue,
width: 300,
height: 60,
),
),
],
),
);
}
The most important thing; if your GradesAppBar extends PreferredSizeWidget I think you should replace it with Container and give it some cool decorations as you want :")