I have a Text widget each time I change the size of the Text widget it keeps increasing in width and height, but i want to only Increase the Height of the Text widget.
I think you can make it by using the Transfrom widget.
Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: MyHomePage());
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform(
transform: Matrix4.identity()..scale(1.0, 1.5),
child: const Text(
'Transformed Text',
),
),
const SizedBox(height: 16.0),
const Text('Default Text'),
],
),
),
);
}
}
You can adjust in xml file to set height and width differently
Related
Is it possible to override the opacity value inside a child widget?
I have a list of items and based on an inactive status I'm making them partially transparent.
ListView.builder(
itemBuilder:(c,i) {
if(status) return MyCard(active:status);
else return Opacity(opacity: 0.5, child: MyCard(active: status);
},
itemCount: 5,
);
But now, all the widgets regardless of active or inactive need to show a download button with full visibility.
class MyCard extends StatelessWidget{
///
Widget build(c){
return Column(
children:[
WidgetA(),
WidgetB(),
// this should be always fully visible.
// Can we override the parent's opacity property somehow?
DownloadButton(),
]
);
}
}
Is this behavior possible using Opacity? Or do I need to visit each of the child items separately?
Wrap WidgetA and WidgetB inside a Column whose parent is Opacity.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: <Widget>[
MyCard(false),
MyCard(true),
MyCard(false),
],
),
),
);
}
}
class MyCard extends StatelessWidget {
MyCard(this.status);
final bool status;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Opacity(
opacity: status ? 1 : 0.3,
child: Column(
children: const <Widget>[
Text('Widget A'),
Text('Widget B'),
],
),
),
TextButton(
onPressed: () {},
child: const Text('DL Button'),
),
],
);
}
}
Is this behavior possible using Opacity?
No
Or do I need to visit each of the child items separately?
Yes
You can split your MyCard widget not contain DownloadButton and then Opacity only for MyCard
I want to place an Iconbutton in the top right corner of my Scaffold that programmatically opens a drawer. It should be the top right corner for every displaytype.
Using an appbar would ruin the look of the page since I just need a small icon that shows that a drawer is available. How do I do this the best way?
My Scaffold is a default one.
How can I achieve this the best way?
You can achieve this using a Stack .
Wrap the body of your Scaffold with a Stack widget and use the Positioned widget as the first child of the stack.
GlobalKey<ScaffoldState> _scafKey = GlobalKey();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
key: _scafKey,
drawer: YourDrawerWidget(),
body: Stack(
children: <Widget>[
Positioned(
top: 0,
right: 0,
child: IconButton(
icon: Icon(Icons.short_text),
onPressed: (){
_scafKey.currentState.openDrawer();
})),
Container(),
],
),
),
);
}
Replace the container with your widget(the original body of the scaffold).
And also the icon of the IconButton to your Icon.
Here the MyHomePage class is the AppBar you need for your Scaffold. All you need to do is change the icon.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: MyHomePage(),
drawer: Container(
width: 100,
color: Colors.red,
),
),
);
}
}
class MyHomePage extends StatelessWidget implements PreferredSizeWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
AppBarAction(),
],
),
),
);
}
#override
Size get preferredSize => Size.fromHeight(60);
}
class AppBarAction extends StatelessWidget {
#override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.print),
onPressed: () {
Scaffold.of(context).openDrawer();
},
);
}
}
I'm trying to accomplish an ostensibly simple layout requirement in Flutter, but am struggling with fulfilling the details of the requirements. I want a widget that displays some text under an image. The image should take whatever available space it has, but shrink if it does not have enough space.
My first attempt was simply:
class VerticalLayout extends StatelessWidget {
#override
Widget build(BuildContext context) {
final column = Column(
children: <Widget>[
Expanded(
child: LabeledImage(),
),
Expanded(
child: LabeledImage(),
),
Expanded(
child: LabeledImage(),
),
Expanded(
child: LabeledImage(),
),
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
);
final scaffold = Scaffold(
body: Center(child: column),
appBar: AppBar(),
);
return scaffold;
}
}
class LabeledImage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final image = FlutterLogo(size: 250);
final text = Text('foo');
final column = Column(
children: <Widget>[
Expanded(
child: image,
),
text,
],
);
return column;
}
}
This works fine for situations where the image is large enough (as with size: 250 above):
But when the image is smaller, the Expanded causes the image to take up more space than required:
OK, so Expanded doesn't seem like the right choice because I don't really want the image to expand if it cannot fill the space. The next likeliest candidate seemed like FittedBox:
class LabeledImage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final image = FlutterLogo(size: 50);
final text = Text('foo');
final column = Column(
children: <Widget>[
FittedBox(
child: image,
fit: BoxFit.scaleDown,
),
text,
],
);
return column;
}
}
Now the VerticalLayout works great in situations where the image is small (as above):
But it fails to shrink the image when it's big:
I want my LabeledImage widget to also work when inside a Row, but I can't even find a way to have it "just work" inside a Column.
Can anyone point me in the right direction?
Like this?
working Vertical and Horizontal Layout
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return VerticalLayout();
// return HorizontalLayout();
}
}
class HorizontalLayout extends StatelessWidget {
final int itemCount = 4;
#override
Widget build(BuildContext context) {
final row = Row(
children: List.generate(itemCount, (_) => HorizontalLabeledImage()).toList(),
);
final scaffold = Scaffold(
body: row,
appBar: AppBar(),
);
return scaffold;
}
}
class HorizontalLabeledImage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Flexible(//doesn't matter Flexible or Expanded
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
FittedBox(child: FlutterLogo()),
Text('foobar', textAlign: TextAlign.center),
],
),
);
}
}
class VerticalLayout extends StatelessWidget {
final int itemCount = 4;
#override
Widget build(BuildContext context) {
final column = Column(
children: List.generate(itemCount, (_) => VerticalLabeledImage()).toList(),
);
final scaffold = Scaffold(
body: column,
appBar: AppBar(),
);
return scaffold;
}
}
class VerticalLabeledImage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Flexible(//doesn't matter Flexible or Expanded
child: Column(
children: <Widget>[
Expanded(child: FittedBox(child: FlutterLogo())),
Text('foobar'),
],
),
);
}
}
enter code here
I arrived at something that seems to work pretty well by combining the answer from #Doc with an answer I received via Slack:
class LabeledImage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final image = FlutterLogo(size: 50);
final text = Text('foo');
final column = Column(
children: <Widget>[
Flexible(
child: FittedBox(
child: image,
fit: BoxFit.scaleDown,
),
),
text,
],
);
return column;
}
}
I don't fully understand why this works, and it's a bit finicky to use when composing widgets together in different ways. For example, once I had a working VerticalLayout and HorizontalLayout, I then tried stacking multiple HorizontalLayout widgets on top of each other in another Column. I had to wrap each widget in Flexible for it to work, and I don't really understand why.
I have this code and when i click on textfield it DOES appear on middle of screen above the keyboard, but it's very tightly fit there and the text below it does not appear. How can i make it so that when I click on the textfield the scrolling is enough to show the text below it as well?
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 600,),
TextField(
),
SizedBox(height: 30,),
Text("I want this text to appear ")
],
),
),
),
);
}
}
There is no exact solution for this, however you can use ScrollController to scroll the rest of the area in your SingleChildScrollView
ScrollController _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
controller: _scrollController,
child: Column(
children: <Widget>[
SizedBox(height: 600),
TextField(
onTap: () {
Timer(Duration(milliseconds: 200), () {
_scrollController.jumpTo(_scrollController.position.maxScrollExtent);
});
},
),
SizedBox(height: 30),
Text("I want this text to appear "),
],
),
),
);
}.
I want to bring below image design in my app using flutter. I am using container and row widget to bring them inline.But didn't work. How can i bring them inline both the color filled box and the text?
You can just surround your Row and Container widgets with an additional Row. On the outer Row you then can set MainAxisAlignment to MainAxisAlignment.spaceAroundor MainAxisAlignment.spaceBetween. This creates the spacing between the different options.
Below a standalone example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
ColoredBox(color: Colors.grey, text: 'Booked'),
ColoredBox(color: Colors.green, text: 'Available'),
ColoredBox(color: Colors.red, text: 'Selected'),
],),
),
),
);
}
}
class ColoredBox extends StatelessWidget {
final String text;
final Color color;
ColoredBox({this.text, this.color});
#override
Widget build(BuildContext context) {
return Row(children: <Widget>[
Container(
width: 10.0,
height: 10.0,
color: this.color,
),
Text(this.text)
],);
}
}