How Can i set same position of widgets for different device? - flutter

Hi to Everyone. I am setting position of icon widget. But it is
changing on different device. How can i fix it? thanks in advance.
> -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[for example][1]
import 'package:flutter/material.dart';
import 'package:country_icons/country_icons.dart';
class E_Takvim_Container extends StatefulWidget {
const E_Takvim_Container({Key key}) : super(key: key);
#override
_E_Takvim_ContainerState createState() => _E_Takvim_ContainerState();
}
class _E_Takvim_ContainerState extends State<E_Takvim_Container> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Takvim"),
backgroundColor: Colors.amber,
),
body: IntrinsicHeight(
child: Container(
child: Column(
children: [
Card(
child: Row(
children: [
Container(
width: 30,
height: 30,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'icons/flags/png/de.png',
package: 'country_icons',
),
),
borderRadius:
BorderRadius.all(Radius.elliptical(300, 900))),
),
Text(
"Tüketici Fiyat Endeksi",
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 17),
),
Padding(
padding: const EdgeInsets.only(left:100.0),
child: Icon(Icons.arrow_forward_ios),
)
],
),
),
],
),
),
),
);
}
}
[1]: https://i.stack.imgur.com/nIzkv.png

For your code example, you can use Expanded for your TextView widget.
Expanded(
flex: 1,
child: Text(
"Tüketici Fiyat Endeksi",
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 17),
),
)
If you want to get the same results at different screen resolutions, (for example: size of widgets or font sizes) You can take a look at the package: ScreenUtils

Related

Flutter: How to prevent screen from scrolling and fit all widgets inside the screen

For some reason everything fits perfectly fine on my device but once using it on a smaller device with screen size 5.5" the screen is scrolling and some of the elements or widgets are outside the screen as shown in the images below. I have listed my code below as well.
How can I prevent this from happening and fit everything inside the screen, regardless the size of the screen?
class OtpVerificationScreen extends StatefulWidget {
const OtpVerificationScreen({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _OtpVerificationScreen();
}
class _OtpVerificationScreen extends State<OtpVerificationScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: SafeArea(
child: Center(
child: Column(
children: [
//Logo
const LogoForAuthScreens(),
const Text(
'Enter verification code',
style: TextStyle(
// fontWeight: FontWeight.bold,
fontSize: 26,
),
),
Container(
margin: const EdgeInsets.only(top: 30, bottom: 20),
child: const Text(
'We send a code to the following number:\n+01723456789',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black45,
),
),
),
Form(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
OtpInputField(),
OtpInputField(),
OtpInputField(),
OtpInputField(),
OtpInputField(),
OtpInputField(),
],
),
),
TextButton(
onPressed: () {},
child: const Text('Resend OTP'),
),
Container(
margin: const EdgeInsets.only(left: 30, top: 30, right: 30),
child: MaterialButton(
onPressed: () {
Navigator.of(context).pushNamed('/signup');
},
color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
padding:
const EdgeInsets.symmetric(vertical: 20, horizontal: 30),
minWidth: double.infinity,
child: const Text(
'Continue',
style: TextStyle(
color: Colors.white,
),
),
),
),
],
),
),
),
);
}
}
You can wrap each widget inside your column widget with a Flexible widget. This will cause them to resize dynamically based on the available space.

Make a list tile button turn grey when clicked

How can I make individual buttons turn grey when I click on approve?
The screenshot is below
Below is the List Tile widget code
Widget pendingList({
required String title,
required String subtitle,
required String leading,
onTap,
}) {
return Row(
children: [
Expanded(
flex: 6,
child: Card(
child: ListTile(
leading: Container(
padding: const EdgeInsets.only(left: 15.0),
alignment: Alignment.center,
height: 50,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50.0),
image: DecorationImage(
image: NetworkImage(
'therul'),
fit: BoxFit.cover,
),
),
),
title: Text(
title,
style: TextStyle(
fontSize: BtnFnt2,
fontWeight: FontWeight.w600,
),
),
subtitle: Text(
subtitle,
style: TextStyle(
fontSize: littleTexts,
),
),
),
),
),
Expanded(
flex: 2,
child: Bounce(
duration: const Duration(milliseconds: 100),
onPressed: onTap,
child: Container(
padding: const EdgeInsets.all(15.0),
color: appOrange,
child: Text(
'Approve',
style: TextStyle(
color: white,
fontWeight: FontWeight.w500,
),
),
),
),
),
],
);
}
How can I make individual buttons turn grey when I click on approve?
Any idea will be appreciated. Kindly refer to the screenshot and assist if you can.
One way, is to make the card into a stateful widget, like (simplified)
class ColorCard extends StatefulWidget {
const ColorCard({
Key? key,
}) : super(key: key);
#override
State<ColorCard> createState() => _ColorCardState();
}
class _ColorCardState extends State<ColorCard> {
Color col = Colors.white;
#override
Widget build(BuildContext context) {
return Card(
color: col,
child: ListTile(
title: const Text('title'),
subtitle: const Text('subtitle'),
trailing: ElevatedButton(
onPressed: () {
setState(() => col = Colors.grey);
},
child: const Text('click'),
),
),
);
}
}
Alternatively the color could be based on a value stored in an object that extends or 'mixin'-s ChangeNotifier if you want more comprehensive integration.

Tabs RenderFlex overflowed by 20 pixels on the bottom

I'm new in flutter and I'm trying to resolve this issue.
Updated My Code
After setting width and height of container, I'm getting this output now
Desirable output
TabsContainer.dart
class TabsContainer extends StatelessWidget {
final String image, tittle;
const TabsContainer({Key? key, required this.image, required this.tittle})
: super(key: key);
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
image,
fit: BoxFit.cover,
height: 46,
width: 46,
),
),
const SizedBox(
height: 10,
),
Text(
tittle,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.black),
)
],
);
}
}
categorypage.dart
List<Tab> tabs = [
const Tab(
height: 50,
child: TabsContainer(
image: 'assets/images/g.png', tittle: 'Social Media'),
),
const Tab(
height: 50,
child: TabsContainer(
image: 'assets/images/g.png', tittle: 'Interior Design')),
];
List<Widget> tabsContent = [
const SocialMedia(),
];
#override
Widget build(BuildContext context) {
return SafeArea(
child: DefaultTabController(
length: tabs.length,
child: Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.arrow_back_ios_rounded,
size: 30, color: AppColors.fIconsAndTextColor),
),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.notifications,
size: 30, color: AppColors.fIconsAndTextColor),
)
],
elevation: 0.0,
backgroundColor: Colors.transparent),
backgroundColor: AppColors.fBackgroundColor,
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Column(
children: [
const Align(
alignment: Alignment.centerLeft,
child: Text(
'Category',
style: TextStyle(fontFamily: "ROCK"),
)),
const SizedBox(height: 10),
TabBar(
automaticIndicatorColorAdjustment: false,
indicatorColor: Colors.transparent,
isScrollable: true,
tabs: tabs),
const SizedBox(height: 10),
Expanded(
child: TabBarView(
physics: const NeverScrollableScrollPhysics(),
children: tabsContent),
),
],
),
),
),
),
);
}
}
try this :
class TabsContainer extends StatelessWidget {
final String image, tittle;
const TabsContainer({Key? key, required this.image, required this.tittle})
: super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.white,
),
child: Image.asset(image),
),
Text(
tittle,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.black),
)
],
);
}
}
Tab: the default height is 72.0 pixels. Without an icon, the height is 46.0 pixels.
We need to provide our custom height in this case. And for decoration, use ClipRRect for on image.
class TabsContainer extends StatelessWidget {
final String image, tittle;
const TabsContainer({Key? key, required this.image, required this.tittle})
: super(key: key);
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
image,
fit: BoxFit.cover,
// as for Desirable output, both height and width will be same
height: 50,
width: 50,
),
),
const SizedBox(
height: 10,
), // you can use padding here
Text(
tittle,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.black),
)
],
);
}
}
And tabs will be like
List<Tab> tabs = [
const Tab(
height: 50 +
10 +
24, // image height + padding/space + 24 for font, better will be getting text size from theme
child: TabsContainer(
image: ...
),
I will also encourage you to check icon and text property for this case. The image size is ok up to 46, if you increase the size, you need to provide Tab(height:) to fix the overflow. You can use unselectedLabelStyle and labelStyle for text on TabBar.
In this case tabs will be
List<Tab> tabs = [
Tab(
text: 'Social Media',
icon: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
'assets/images/image01.png',
fit: BoxFit.cover,
// as for Desirable output, both height and width will be same
height: 46,
width: 46,
),
),
),
Tab(
text: 'Interior Design',
icon: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset(
'assets/images/image02.png',
fit: BoxFit.fitHeight,
// as for Desirable output, both height and width will be same
height: 46,
width: 46,
),
),
),
];

Side by side components in flutter

I am trying to make an icon and text in a container side by side by using a row and a column but I haven't been able to get results I want. On the first picture it's my code and on the second it's what I want to achieve. Any help would be app. Also, how do I implement a divider with a different color? Cheers
You are using TextField in your ReusableCard right?
Sure thing you can make it with Row but in this case this is usually done with suffixIcon property:
TextField(
decoration: InputDecoration(
suffixIcon: Icon(Icons.search),
),
Or you can just wrap children widgets that has to be in a row in a, well Row widget. Here is example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
TextStyle _style = TextStyle(color: Colors.yellow[800], fontSize: 30);
Color _color = Colors.yellow[800];
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
backgroundColor: Colors.blue[800],
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Icon(Icons.done, color: _color),
SizedBox(width: 15),
Text('Electricity', style: _style),
Spacer(),
Icon(Icons.done, color: _color),
SizedBox(width: 15)
],
),
Divider(color: _color),
Row(
children: [
Icon(Icons.done, color: _color),
SizedBox(width: 15),
Text('Internet', style: _style),
Spacer(),
Icon(Icons.done, color: _color),
SizedBox(width: 15)
],
),
Divider(),
],
)),
);
}
}
Spacing / alignment of the icons will be tricky without using Stack, but it could be done with lots of fiddling around with padding/margin.
import 'package:flutter/material.dart';
final bool debug = false;
class RowColLayoutPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Row Col Layout'),
),
body: Column(
children: [
Container(
color: debug ? Colors.lightGreenAccent : null,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: RowIcon(icon: Icons.lightbulb)
),
Expanded(
flex: 2,
child: RowText(text: 'Electricity')
)
],
),
),
RowDivider(),
Container(
color: debug ? Colors.lightGreenAccent : null,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: RowIcon(icon: Icons.microwave_rounded,)
),
Expanded(
flex: 2,
child: RowText(text: 'Internet')
)
],
),
),
RowDivider(),
],
),
);
}
}
class RowIcon extends StatelessWidget {
final IconData icon;
RowIcon({this.icon});
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 2),
decoration: BoxDecoration(
border: debug ? Border.all() : null
),
child: Icon(icon, size: 80,)
);
}
}
class RowText extends StatelessWidget {
final String text;
RowText({this.text});
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: debug ? Border.all() : null
),
child: Text(text, style: TextStyle(fontSize: 40))
);
}
}
class RowDivider extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Divider(thickness: 1, color: Colors.blue, indent: 15, endIndent: 15,);
}
}

Styling of Cupertino Picker in Flutter

I have tried to implement a layout like this using flutter.
I have used the Cupertino Picker Class for that.
But it just looks not as good as I want it to look.
I have tried to fix it by using the properties, that are listed on the flutter website, but I did not find any better solution. How can I fix this issue or is there even another widget that is better in this case?
My code looks like this:
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: Colors.red,
),
child: Container(
child: Center(
child: CupertinoPicker(
itemExtent: 40,
diameterRatio: 5,
offAxisFraction: 10,
backgroundColor: Colors.black54,
onSelectedItemChanged: (int index) {
print(index);
},
children: <Widget>[
Text('Tap', style: TextStyle(color:Colors.white)),
Text('Colorbattle',style: TextStyle(color:Colors.white)),
Text('Patience',style: TextStyle(color:Colors.white)),
],
))));
}
}
Playing around your code, I've tried to implement the same behavior. I've observed that changing the values of diameterRatio and offAxisFraction could change the way your UI look like. In my sample, the values of diameterRatio and offAxisFraction is 10 and -1 respectively. Just imagine this kind of roulette:
diameterRatio is the diameter of the cylinder and offAxisFraction is the axis where the side of the cylinder is facing. To mimic the example in the picture, set the value of the offAxisFraction to a positive value, in the implementation shown below, I've set it to 10.
Below is an example of copy the behavior of the UI you're trying to replicate:
import 'package:flutter/cupertino.dart';
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 CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: Colors.red,
),
child: Center(
child: Container(
// color: Colors.black54,
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
width: 200.0,
height: 150.0,
child: Center(
child: CupertinoPicker(
itemExtent: 40,
diameterRatio: 10,
offAxisFraction: -1,
backgroundColor: Colors.black54,
onSelectedItemChanged: (int index) {
print(index);
},
children: <Widget>[
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 40.0),
child: Text(
'Estimate',
style: TextStyle(color: Colors.white),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 40.0),
child: Text(
'Random',
style: TextStyle(color: Colors.white),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 40.0),
child: Text(
'Colorbattle',
style: TextStyle(color: Colors.white),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 40.0),
child: Text(
'Patience',
style: TextStyle(color: Colors.white),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 40.0),
child: Text(
'Tap',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
),
),
);
}
}
Output: