I want to make a custom Range slider that looks like this:
However, I tried but my RangeSlider looks like:
My code:
data: SliderTheme.of(context).copyWith(
trackShape: RectangularSliderTrackShape(),
trackHeight: 2.0,
thumbShape:
RoundSliderThumbShape(enabledThumbRadius: 9.0),
overlayShape:
RoundSliderOverlayShape(overlayRadius: 18.0),
valueIndicatorShape: RoundSliderOverlayShape(),
valueIndicatorColor: Color(0xffF5F5F5),
valueIndicatorTextStyle:
TextStyle(color: Color(0xff7E3338), fontSize: 14.0),
rangeThumbShape: RoundRangeSliderThumbShape(),
rangeValueIndicatorShape:
PaddleRangeSliderValueIndicatorShape(),
),
child: RangeSlider(
values: selectedRange,
min: 0.0,
max: 50000.0,
semanticFormatterCallback: (RangeValues rangeValues) {
return '${rangeValues.start.round()} - ${rangeValues.end.round()} dollars';
},
//added talk back feature for android
labels: RangeLabels(
'${selectedRange.start}', '${selectedRange.end}'),
activeColor: Color(0xff7E3338),
inactiveColor: Color(0xffD7D8DD),
onChanged: (RangeValues newRange) {
setState(() => selectedRange = newRange);
},
),
),
What can I do different in the code that will give me the expected output?
Please check this plugin where you can customize the slider as you want i have created the sample from the above-mentioned image.
But you can customize it as per your needs.
Plugin :https://pub.dev/packages/flutter_xlider
Check the code below :
import 'package:flutter/material.dart';
import 'package:flutter_xlider/flutter_xlider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
//
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _lowerValue = 50;
double _upperValue = 180;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 50, left: 20, right: 20),
alignment: Alignment.centerLeft,
child: FlutterSlider(
values: [1000, 15000],
rangeSlider: true,
//rtl: true,
ignoreSteps: [
FlutterSliderIgnoreSteps(from: 8000, to: 12000),
FlutterSliderIgnoreSteps(from: 18000, to: 22000),
],
max: 25000,
min: 0,
step: FlutterSliderStep(step: 100),
jump: true,
trackBar: FlutterSliderTrackBar(
activeTrackBarHeight: 2,
activeTrackBar: BoxDecoration(color: Colors.brown),
),
tooltip: FlutterSliderTooltip(
textStyle: TextStyle(fontSize: 17, color: Colors.lightBlue),
),
handler: FlutterSliderHandler(
decoration: BoxDecoration(),
child: Container(
decoration: BoxDecoration(
color: Colors.brown,
borderRadius: BorderRadius.circular(25)),
padding: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25)),
),
),
),
rightHandler: FlutterSliderHandler(
decoration: BoxDecoration(),
child: Container(
decoration: BoxDecoration(
color: Colors.brown,
borderRadius: BorderRadius.circular(25)),
padding: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25)),
),
),
),
disabled: false,
onDragging: (handlerIndex, lowerValue, upperValue) {
_lowerValue = lowerValue;
_upperValue = upperValue;
setState(() {});
},
)),
],
),
),
);
}
}
This is the image output
you can change the colors accordingly.
Let me know if it works.
Check out this code for tooltip:
tooltip: FlutterSliderTooltip(
disableAnimation: true,
alwaysShowTooltip: true,
textStyle: TextStyle(fontSize: 17, color: Colors.lightBlue),
),
Wrap your Range Slider in Slider theme and customize your slider data theme according to your need. use the bellow image for reference and name of all the properties of slider.
Related
How can I stack multiple textfields like this? I am trying to replicate this screen.
I've tried creating a Container with rounded borders, with a Column as the child containing multiple textfields. But the textfields extend past the border of the Container and the margin between them is too big.
My code so far:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Administration extends StatefulWidget {
const Administration({Key? key}) : super(key: key);
#override
State<Administration> createState() => _AdministrationState();
}
class _AdministrationState extends State<Administration> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Column(children: [
CupertinoNavigationBar(
automaticallyImplyLeading: false,
leading: IconButton(
icon: const Icon(
Icons.chevron_left,
size: 23,
),
color: Colors.grey,
onPressed: () {
Navigator.of(context).pop();
}),
trailing: const Icon(
Icons.account_circle,
size: 30.0,
color: Colors.grey,
),
middle: const Text('New Event'),
),
SizedBox(height: 15.0),
Container(
child: Column(
children: [],
),
)
],
)
);
}
}
From the image i see created a example for you:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('sampla app'),
),
body: Container(
color: const Color(0xff1c1c1d),
child: Column(
children: [
const SizedBox(
height: 50,
),
Container(
margin: const EdgeInsets.all(10.0),
decoration:
BoxDecoration(color: const Color(0xff4c4c54), borderRadius: BorderRadius.circular(10.0)),
child: Column(
children: [
const Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Title',
labelStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
margin: const EdgeInsets.only(left: 20),
height: 0.2,
color: Colors.grey,
),
const Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Location or Video Call',
labelStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
],
),
),
],
),
),
);
}
}
Adding the image as well for how it looks.
Let me know if this works for you.
I wanted to create a button like the picture. I am a beginner in flutter so I don't know how to start. Let me add that I would like to add a red glow effect to the button.
Try below code
OutlinedButton(
onPressed: () {
print('button pressed');
//write your onPressed function here
},
child: Text(
'TEXT',
style: TextStyle(
fontSize: 40,
),
),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20,
),
),
primary: Colors.red,
backgroundColor: Colors.red.shade100,
fixedSize: Size(200, 100),
side: BorderSide(
width: 10.0,
color: Colors.red,
),
),
),
Result screen->
You can use InkWell with custom style,
here is an example
InkWell(
onTap: (){
//YOUR FUNCTION
},
radius: 16.0,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(12),
),
child: Text('Text', style: TextStyle(color: Colors.red),),
),
),
this will give you the you the output:
This should be a little more flexible, allowing the customization of color, shadow, light vs. dark backgrounds plus, of course, text.
Also, this doesn't use containers. You can't make containers constant, so many of us try to avoid them now:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: const Center(
child: CustomButton(
// Places a black or white backing behind the inside, translucent color.
backgroundIsDark: true,
// The color of everything.
color: Colors.red,
// The shadow *outside* the border.
shadowSize: 2.0,
text: 'Test',
),
),
);
}
}
class CustomButton extends StatelessWidget {
const CustomButton({
Key? key,
required this.backgroundIsDark,
required this.shadowSize,
required this.text,
required this.color,
}) : super(key: key);
final double shadowSize;
final String text;
final Color color;
final bool backgroundIsDark;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
// TODO Implement Me.
},
radius: 16.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: backgroundIsDark ? Colors.black : Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: color,
width: 4,
),
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: color.withOpacity(0.4),
blurRadius: shadowSize,
spreadRadius: shadowSize,
offset: const Offset(0.0, 0.0),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Text(
text,
style: TextStyle(color: color),
),
),
),
),
);
}
}
Here I am using introduction_screen plugin.
In this problem, I want the same Ui which is my first image, but my second image is being created as it is.
Here I want dots in middle after image and next text on bottom with arrow which should be work for next intro page
How to make it
This is my intro page code.
I am using introduction_screen plugin
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:introduction_screen/introduction_screen.dart';
class OnBoardingPage extends StatefulWidget {
#override
_OnBoardingPageState createState() => _OnBoardingPageState();
}
class _OnBoardingPageState extends State<OnBoardingPage> {
final introKey = GlobalKey<IntroductionScreenState>();
void _onIntroEnd(context) {
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => HomePage()),
);
}
Widget _buildImage(String assetName, ) {
return Image.asset('assets/$assetName',);
}
#override
Widget build(BuildContext context) {
const bodyStyle = TextStyle(fontSize: 19.0);
const pageDecoration = PageDecoration(
titleTextStyle: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w700),
bodyTextStyle: bodyStyle,
bodyPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 16.0),
pageColor: Colors.white,
imagePadding: EdgeInsets.zero,
);
return Scaffold(
body: SafeArea(
child: IntroductionScreen(
key: introKey,
globalBackgroundColor: Colors.white,
pages: [
PageViewModel(
decoration: pageDecoration,
title: "Fractional shares",
body:
"Instead of having to buy an entire share, invest any amount you want.",
image: _buildImage('intro_s1.png'),
),
PageViewModel(
title: "Learn as you go",
body:
"Download the Stockpile app and master the market with our mini-lesson.",
image: _buildImage('intro_s1.png'),
decoration: pageDecoration,
),
PageViewModel(
title: "Kids and teens",
body:
"Kids and teens can track their stocks 24/7 and place trades that you approve.",
image: _buildImage('intro_s1.png'),
decoration: pageDecoration,
),
],
onDone: () => _onIntroEnd(context),
next: const Icon(Icons.arrow_forward),
done: const Icon(Icons.arrow_forward),
curve: Curves.fastLinearToSlowEaseIn,
controlsMargin: const EdgeInsets.all(16),
controlsPadding: kIsWeb
? const EdgeInsets.all(12.0)
: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 4.0),
dotsDecorator: const DotsDecorator(
size: Size(10.0, 10.0),
color: Color(0xFFBDBDBD),
activeSize: Size(22.0, 10.0),
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
),
),
dotsContainerDecorator: const ShapeDecoration(
color: Colors.black87,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
),
),
),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home')),
body: const Center(child: Text("This is the screen after Introduction")),
);
}
}
I want looks like this
but it is becoming like this
change black87 to white in this section of your code.
dotsContainerDecorator: const ShapeDecoration(
color: Colors.black87,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0))
today I tried theming my app... I looked through a few packages and ended up using the stacked_themes package. Now I tried to implement the code as shown in the documentation but Im not sure how I have to implement the dialog
theme model file:
import 'package:google_fonts/google_fonts.dart';
import 'package:stacked_themes/stacked_themes.dart';
import 'package:flutter/material.dart';
class MultiThemeModel {
int index;
String themeName;
MultiThemeModel({required this.index, required this.themeName});
}
titlesForThemeModel(int index) {
switch (index) {
case 0:
return 'Luxury Purple';
case 1:
return 'Red Fine Wine';
}
return 'No theme for index';
}
List<MultiThemeModel> get themes => List<MultiThemeModel>.generate(
2,
(index) =>
MultiThemeModel(index: index, themeName: titlesForThemeModel(index)));
List<Widget> get widgets => themes
.map((themeData) => MultipleThemeViewerWidget(themeData: themeData))
.toList();
class MultipleThemeViewerWidget extends StatelessWidget {
MultipleThemeViewerWidget({Key? key, required this.themeData})
: super(key: key);
final MultiThemeModel themeData;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(
right: 40,
),
child: GestureDetector(
onTap: () {
getThemeManager(context).selectThemeAtIndex(themeData.index);
},
child: Container(
height: 60,
width: 105,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).scaffoldBackgroundColor.withOpacity(.3),
border: Border.all(
color: Theme.of(context).scaffoldBackgroundColor, width: 3)),
child: Center(
child: Text(
themeData.themeName,
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Theme.of(context).scaffoldBackgroundColor,
),
),
),
),
),
),
);
}
}
List of themes:
List<ThemeData> getThemes() {
return [
ThemeData(
brightness: Brightness.light,
primaryColor: purpleDesign[100],
scaffoldBackgroundColor: purpleDesign[400],
indicatorColor: purpleDesign[50],
primaryColorLight: purpleDesign[300],
hintColor: purpleDesign[400]),
ThemeData(
brightness: Brightness.light,
primaryColor: redDesign[100],
scaffoldBackgroundColor: redDesign[400],
indicatorColor: redDesign[50],
primaryColorLight: redDesign[300],
hintColor: redDesign[400])
];
}
dialog:
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 1,
backgroundColor: Theme.of(context).indicatorColor,
insetAnimationCurve: Curves.decelerate,
child: Container(
height: 170,
child: Padding(
padding: const EdgeInsets.only(
left: 33,
top: 85,
),
child: Column(
children: [
Row(children: [
for(var theme in themes)
MultipleThemeViewerWidget(themeData: ),],),
],
),
),
),
);
my problem - I don't know what to pass to the themeData: in the forloop from the dialog... it would be really nice if somebody could help with this
thanks in advance:)
I'm wanted to achieve the following UI in the screenshot and achieved by the below code on two different phones. But the same is not working on many other devices. Is there a way to handle the size of CircularProgressIndicator(currently I'm using Transform.scale() which is not giving me generic result) so that it fits around the sibling container inside the stack?
Edit:
The reason for using CircularProgressIndicator is to show progress.
Widget build(BuildContext context) {
final mediaq = MediaQuery.of(context).size;
return Stack(alignment: Alignment.center, children: [
Transform.scale(
scale: mediaq.width <= 360 ? 2.35 : 2.70,
child: const CircularProgressIndicator(
backgroundColor: Colors.white,
color: Colors.orange,
strokeWidth: .75,
value: 1,
),
),
Container(
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [Colors.red, Colors.orange],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
fixedSize: Size(mediaq.width * .24, mediaq.height * .12),
shape: const CircleBorder(side: BorderSide.none),
),
onPressed: () {},
child: const Text("child")),
),
]);
}
Re wrote your code and here is my output
Transform.scale(
scale: mediaq.width> 375 ? 3.10 : 2.35,
child: const CircularProgressIndicator(
backgroundColor: Colors.white,
color: Colors.white,
strokeWidth: .75,
value: 1,
),
),
Output:
Iphone 12 Pro Max (W:428 , H:926)
Iphone SE (Second Generation) (W:375, H: 667)
Also you can try this package for responsive ui.
You can use flutter_screenutil package to make your UI more responsive, instead of MediaQuery.
I have done your screen using flutter_screenutil package.
Please try this out. I assumed the heights, widths, and radius. You can modify these as per your requirement. I have also attached the UI I got.
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(375, 667),
minTextAdapt: true,
builder: () {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ButtonTest(),
);
});
}
}
class ButtonTest extends StatefulWidget {
const ButtonTest({Key? key}) : super(key: key);
#override
_ButtonTestState createState() => _ButtonTestState();
}
class _ButtonTestState extends State<ButtonTest> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Container(
height: 94.h, // You can change here
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
),
),
child: Padding(
padding: EdgeInsets.all(
2.0.w, // You can change here
),
child: GestureDetector(
onTap: () {
print("Button Pressed");
},
child: Container(
height: 92.h, // You can change here
width: 92.h, // You can change here
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
Colors.red,
Colors.orange,
],
),
),
child: const Center(
child: Text(
'child',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
)),
),
),
),
),
),
);
}
}