I'm new to flutter. I'm trying to build register and login app.
but I faced an issue. My problem is that I have this container
class Background extends StatelessWidget {
final Widget child;
const Background({
Key? key,
required this.child,
}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
top: 0,
right: 0,
child: Image.asset(
"assets/images/img1.png",
width: size.width
),
),
Positioned(
top: 0,
right: 0,
child: Image.asset(
"assets/images/img2.png",
width: size.width
),
),
child
],
),
);
}
}
I need to include this container in Scaffold here to take the design
but I didn't know how can I do that.
return Scaffold(
body: Form(
key: formkey,
child: Column()));
Can Anyone help me to do that please
Background is a wrapper widget. Do it like
Scaffold(
body: Background(
child: Form(
child: Column(
children: [],
),
),
),
),
Related
I have some stateless scrollable widget like this
`class ProfileScreen extends StatelesslWidget {
final dataKey = new GlobalKey();
#override
Widget build(BuildContext context) {
BlocProvider.of<StepsBloc>(context).add(CheckStatus());
return Scaffold(
backgroundColor: NorbuColors.darkGrey,
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(
left: 20, right: 20, top: 48, bottom: 15),
child: _ProfileReg(),
),
),
SliverToBoxAdapter(
key: dataKey,
child: _AchievementsStatistics(),
),
SliverToBoxAdapter(
child: _StepsStatistics(),
),
SliverToBoxAdapter(
child: _MyGoalsStatistics(),
),
SliverToBoxAdapter(
child: _GratefulTimerStatistics(),
),
SliverToBoxAdapter(
child: _WheelBalanceStatistics(),
),
],
),
);
}`
And my question is: what is a good way to scroll parent widget from child?
I know easy way is to use
Scrollable.ensureVisible(dataKey.currentContext!);
but it works only inside scrollable parent widget. Thanks!
I'm trying to make a discrete progress indicator similar to percent indicator but in a discrete manner.
And I wanna add some guide widget or arrow at the position of the current progress position something like images. (It is not actually implemented, it is a view of widget inspector, but I wanna get the result of that image, top or bottom of the row.)
But, the problem is, how can I get the position of the child widget of the row and add some stacked widget to that?
class LinearDiscreteIndicator extends StatelessWidget {
final int numTotal;
final int numCurrent;
final double? width;
final double lineHeight;
final double margin;
final Color fillColor;
final Color emptyColor;
final Radius barRadious;
final MainAxisAlignment alignment;
final Widget? progressWidget;
const LinearDiscreteIndicator({
Key? key,
required this.numTotal,
required this.numCurrent,
this.width,
required this.lineHeight,
this.margin = 2,
this.fillColor = Colors.blue,
this.emptyColor = Colors.grey,
this.barRadious = const Radius.circular(2),
this.alignment = MainAxisAlignment.start,
this.progressWidget,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
SizedBox(
height: lineHeight,
width: width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: alignment,
children: List.generate(numTotal, (index) => index)
.map(
(e) => Expanded(
child: Padding(
padding: EdgeInsets.only(
right: e == (numTotal - 1) ? 0 : margin,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(barRadious),
color: e > numCurrent ? emptyColor : fillColor,
),
),
),
),
)
.toList(),
),
),
],
);
}
}
This is my current widget class code, but I'm not sure how can I enable a tooltip-like widget at the position of the current progress.
var numCurrent = 10;
var numTotal = 30;
var itemWidth = (MediaQuery.of(context).size.width / numTotal);
double containerWidth = 80;
var positionLeft = ((itemWidth) * (numCurrent + 1)) - (containerWidth / 2);
return Scaffold(
appBar: AppBar(),
backgroundColor: theme.colorScheme.background,
body: SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 50,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Positioned(
left: positionLeft,
top: 10,
child: Container(
child: Stack(
children: const [
Align(alignment: Alignment.topCenter, child: Text("Container")),
Align(
alignment: Alignment.bottomCenter,
child: Icon(
Icons.arrow_drop_down_sharp,
size: 24,
)),
],
),
width: containerWidth,
height: 30,
color: Colors.red,
),
),
Positioned(
bottom: 0,
child: LinearDiscreteIndicator(
numCurrent: numCurrent,
numTotal: numTotal,
lineHeight: 4,
width: MediaQuery.of(context).size.width,
),
),
],
),
),
],
),
),
);
I want to achieve this:
For now, I got this:
this is my code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:snippet_coder_utils/ProgressHUD.dart';
class LogIn extends StatefulWidget {
const LogIn({Key? key}) : super(key: key);
#override
State<LogIn> createState() => _LogInState();
}
class _LogInState extends State<LogIn> {
bool isAPIcallProcess = false;
bool hidePassword = true;
GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
String? username;
String? password;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color(0xffF24004),
body: Center(
child: Stack(
children: [
Positioned(
left: 20,
right: 20,
top: 100,
child: Image.asset(
"lib/img/pomodoro.png",
width: 250,
height: 250,))
],
),
),
),
);
}
}
So, how can I achieve the 3 columns? I tried to make another stful widget but I don't know why but it doesn't work, I think is because the main design is in this MaterialApp widget.
I think it would be better if you separate material-app context in further use case. Also try using Align widget for dynamic placement.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffF24004),
body: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
Align(
alignment: const Alignment(0, -.75),
child: Container(
width: constraints.maxWidth * .8, //image size
height: constraints.maxWidth * .8,
color: Colors.green,
),
// Image.asset(
// "lib/img/pomodoro.png",
// width: 250,
// height: 250,
// ),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
...List.generate(
3,
(index) => Container(
width: constraints.maxWidth,
height: constraints.maxHeight * .1,
color: index.isEven ? Colors.deepPurple : Colors.amber,
),
)
],
),
)
],
),
),
);
}
More about Stack
I want to put a container widget in the middle of the device screen. However, since I used the SizedBox() and SvgPicture.asset() widgets before that, the container does not come right in the middle of the device. How can I do this?
This is my code:
class CenterWidget extends StatefulWidget {
const CenterWidget({Key? key}) : super(key: key);
#override
_CenterWidgetState createState() => _CenterWidgetState();
}
class _CenterWidgetState extends State<CenterWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
const SizedBox(height: 56),
SvgPicture.asset(ImageConstants.instance.logoSvg,
width: (MediaQuery.of(context).size.width - 60) / 2),
Expanded(
child: Center(
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
),
],
),
),
),
);
}
}
Use a top center aligned stack, and put the widget you want to be centered within a Positioned.fill widget. You can put the spacer and logo in their own column to keep them arranged vertically:
class _CenterWidgetState extends State<CenterWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30),
child: Stack(
alignment: Alignment.topCenter,
children: [
Column(
children: [
const SizedBox(height: 56),
SvgPicture.asset(ImageConstants.instance.logoSvg,
width: (MediaQuery.of(context).size.width - 60) / 2),
],
),
Positioned.fill(
child: Center(
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
),
],
),
),
),
);
}
}
I have this widge in flutter
I am using a Progress Bar because eventually there will be progress, this is an example
class MyWidget extends StatelessWidget {
const MyWidget({
Key key,
}) : super(key: key);
final double containersWidth = 510;
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
width: containersWidth,
padding: EdgeInsets.only(top: 12.0),
child: Stack(
children: [
Positioned(
top: 14.0,
width: containersWidth,
child: LinearProgressIndicator(
value: 0,
backgroundColor: Colors.amberAccent,
minHeight: 3,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.redAccent),
),
),
Container(
width: containersWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
],
),
),
],
),
);
}
}
class _Circle extends StatelessWidget {
const _Circle({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.amberAccent,
shape: BoxShape.circle,
),
),
],
);
}
}
This produces a layout like this one, which is fine
Now, I need to add a label under each circle, but keep the space the same as the image, but when I do this,
class _Circle extends StatelessWidget {
const _Circle({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.amberAccent,
shape: BoxShape.circle,
),
),
Text('example')
],
);
}
}
the width of the container increases, and since the space is counted from the center of the container, I obtain something like this
I need the circles placed as in the first image, and the labels under the circles, centered, but not being counted as part of the width of the container.
I tried to used Positioned to wrap the labels but it didn't work because the overflow is hidden and also I was not able to position the text centered from the circle. Any help is greatly appreciated.
Edit:
this is how it looks when using Positioned
with the following code
class _Circle extends StatelessWidget {
const _Circle({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.amberAccent,
shape: BoxShape.circle,
),
),
Positioned(
top: 14,
child: Text('example')
)
],
);
}
}
The overflow is hidden, and besides, I don' know how to center the text relative to the Stack ( and the circle)
I am thinking I have to use SizedOverflow box, I will see if I can figure it out
I was able to solve it like this
class MyWidget extends StatelessWidget {
const MyWidget({Key key}) : super(key: key);
final double containersWidth = 510;
#override
Widget build(BuildContext context) {
return Container(
height: 30,
alignment: Alignment.center,
width: containersWidth,
padding: EdgeInsets.only(top: 12.0),
child: Stack(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
LinearProgressIndicator(
value: 0,
backgroundColor: Colors.yellowAccent,
minHeight: 3,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.yellowAccent),
),
Container(
// color: Colors.redAccent.withAlpha(100),
width: containersWidth,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
_Circle(),
],
),
),
],
),
);
}
}
class _Circle extends StatelessWidget {
const _Circle({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SizedOverflowBox(
size: Size(30, 47.3),
child: Column(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: new BoxDecoration(
color: Colors.yellowAccent,
shape: BoxShape.circle,
),
),
SizedBox(height: 4.3,),
Text("example"),
],
),
);
}
}
If there is something wrong with my code, please let me know
This is the result