How do I create a voting progress bar in Flutter that starts from both end, where green extends from left side in green color if people voted YES and red extends from right side in green color if people voted NO . I have tried to find in Pub dev and can't find something like this. Would like to know how to create one as most of the tutorial I found, the progress bar only extends from one side instead of both sides. Something like this to clarify what I want to do
Maybe like this :
Widget _voteWidget(int yesVote, int noVote) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 20,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30)),
),
child: Row(
children: [
Flexible(
flex: yesVote,
child: Container(
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30), bottomLeft: Radius.circular(30)),
),
),
),
Flexible(
flex: noVote,
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(topRight: Radius.circular(30), bottomRight: Radius.circular(30)),
),
),
),
],
),
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('${yesVote.toString()} Yes'),
Text('${noVote.toString()} Yes'),
],
)
],
),
);
}
use linearprogress indicator , if you want to add any decoration, just wrap with your custom widget
class MyWidget extends StatelessWidget {
int yes = 8736;
int no = 520;
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(20),
child: LinearProgressIndicator(
minHeight: 20,
color: Colors.green,
backgroundColor: Colors.red,
value: (yes / (yes + no)),
));
}
}
result:
Related
Absolute positioning on scaffold/screen.
1 - The white container in the 1st photo - how to align this as an absolute position on the bottom of the screen / how is it done as the best method?
2 - The container has to be overlaid on the top of the image.
Tried to give absolute positioning using stack on the screen/scaffold, didn't work.
Use the following code:
class SampleWidget extends StatefulWidget {
const SampleWidget({super.key});
#override
State<SampleWidget> createState() => _SampleWidgetState();
}
class _SampleWidgetState extends State<SampleWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/mountains-valleys-and-clouds-vertical-panorama-rick-deacon.jpg'))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 400,
),
Expanded(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: const Center(
child: Text(
"The new adventure begin here",
style: TextStyle(fontSize: 22),
)),
),
),
],
),
),
);
}
}
Output:
so I'm trying to make a registration page with multi fields for name and password and email etc.
my problem is that i couldn't make the page scrollable, can please help me with fixing that
I just want the page to be scrollable
Here is my Code :
class InstRegisterPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0x47705C53), Color(0x9E36251D)],
stops: [0.1, 0.9],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
),
child: Column(
children: [
Container(
child: wLogo(),
),
SizedBox(
height: 75,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xFFF7F6F5),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(26),
topRight: Radius.circular(26)),
),
child: Column(
children: [
SizedBox(
height: 15,
),
CSfield('Particpent Name',''),
CSfieldEmail('Email',''),
CSfield('Password',''),
CSPasswordFiled('Phone Number',''),
CSButton(),
],
),
),
)
],
),
//child: InstHomePageWidgets(),
),
),
);
}
}
You can wrap your Column with a SingleChildScrollView to make it scrollable.
SingleChildScrollView(
child: Column(
children: [...]
),
)
You can check the page here to see all the scrollable widgets.
Also if the keyboard is pushes content up you can check this page
Does anyone know how to round the video corners in a video call? The container that I place them in has a border radius, but when the video starts it always shows a square container.
My video render code is below:
#override
Widget build(BuildContext context) {
return Stack(
children: [
_localSwitchRender == true
? rtc_local_view.SurfaceView()
: rtc_remote_view.SurfaceView(uid: widget.remoteUid.first),
Align(
alignment: Alignment.topLeft,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: GestureDetector(
onTap: _switchRender,
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 42, 0, 0),
child: Stack(
children: [
Column(
children: [
const SizedBox(
height: 20
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Color(0x66333333),
),
width: 158,
height: 220,
foregroundDecoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
child: _localSwitchRender
? rtc_remote_view.SurfaceView(
uid: widget.remoteUid.first,
renderMode: VideoRenderMode.FILL,
)
: rtc_local_view.SurfaceView(
renderMode: VideoRenderMode.Hidden,
zOrderMediaOverlay: true,
),
),
],
),
],
),
),
),
),
),
],
);
}
}
Any help is greatly appreciated!
Place your widget inside ClipRRect:
ClipRRect(
borderRadius: BorderRadius.circular(10)
child: // your widget
)
Thanks Xoltwan! That worked:
ClipRRect(
borderRadius: BorderRadius.circular(10)
child: // your widget
)
I want to create a layout like this where the users will select and image and it'll take them to another screen like below and the selected image will take about one-third portion of the screen. The rest 2/3rd will be used as a canvas as you can see.
Unfortunately this is what I've got till now:
Here's the entire code:
import 'package:flutter/material.dart';
import 'package:flutter_app/src/components/Canvas.dart';
import 'package:flutter_app/src/components/DrawingArea.dart';
class DetailsPage extends StatelessWidget {
List<DrawingArea> points = [];
final String imagePath;
final String title;
final int index;
DetailsPage(
{#required this.imagePath, #required this.title, #required this.index});
// Display the selected image
Widget displayImage(String imagePath) {
return Container(
child: Expanded(
child: Hero(
tag: 'logo$index',
child: Container(
margin: EdgeInsets.only(top: 20, right: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
image: DecorationImage(
image: AssetImage(imagePath),
fit: BoxFit.cover,
),
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("This will be the canvas"),
),
body: Container(
child: Column(
children: <Widget>[
displayImage(imagePath),
],
),
),
);
}
}
You have to set height of container which you can set by using MediaQuery as shown below:
Past this function in your code
Widget displayImage(String imagePath) {
return Container(
height: MediaQuery.of(context).size.height / 3,
child: Expanded(
child: Hero(
tag: 'logo$index',
child: Container(
margin: EdgeInsets.only(top: 20, right: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
image: DecorationImage(
image: AssetImage(imagePath),
fit: BoxFit.cover,
),
),
),
),
),
);
}
You can use Flexible: https://api.flutter.dev/flutter/widgets/Flexible-class.html
https://youtu.be/CI7x0mAZiY0
Column(children: [
Flexible(
flex: 1
child: Container(color: Colors.blue),
Flexible(
flex: 2
child: Container(color: Colors.green),
),
]);
Not sure if I got you right. Is this what you're trying to get?
Column(
children: [
Expanded(
flex: 1,
child: Image.asset(
'your_image_asset',
fit: BoxFit.cover,
),
),
Expanded(
flex: 2,
child: Placeholder(),
),
],
)
I have simple ListView with Custom Widgets in it:
#override
Widget build(BuildContext context) {
return Container(
height: Constants.width(context) / 2.5,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
wishlist.name,
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
Container(
height: 200,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
)),
),
),
],
),
);
}
The problem is that right now I am setting the Containers height to 200. But I would like the Container to simply fill all the space that is left. What is the way to make the height dynamically? (from the bottom of my Text to the bottom of the whole Container)
Wrap your Container by Expanded
PS : Probably you have to add mainAxisSize:MainAxisSize.min to your Column