If I use Row() instead of Center(), it will not be displayed,just blank.
I expect a music player like layout.
Make 2 Row, the 1st Row contain "LeftMenu" and "Expanded Container" for content .
Putting this in scaffold gives you the left menu:
drawer: const Drawer(
child: Text("Left Menu")
),
Putting this inside scaffold body works. Expanded and a row:
Column(
children: [
Expanded(
child: Container(
color: Colors.green,
child: const Center(child: Text("1")),
)
),
Row(
children: const [
Text("1"),
SizedBox(width: 10),
Text("2"),
],
),
],
)
If you replace center with row, it probably displays but in the top left corner and not middle. Try to wrap your Row with Center and it should display in the middle. For the row you need to add a mainAxisAlignment.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center (child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[ Text('Left menu'),Text('Place container here')]
),),
),
);
}
}
This is actually the wrong question.
The real problem is: if the ListView is nested by Column, Row, it will not be displayed.
You need to use Expanded or Container on the outside and then nest it with Colmn or Row.
Related
I want make text to the right, what am I doing so far
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _judul = 'Private Chat';
static var _warnaTema = Colors.pink[100];
Widget _dummyExpanded() {
return Expanded(
child: Container(), //contain empty data,
); //just for fill remaining space
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _judul,
theme: ThemeData(
primaryColor: _warnaTema,
),
home: Column(
children: [
Container(
child: Row(
children: [
this._dummyExpanded(),
Text('this is real data 1'),
],
),
),
Container(
child: Row(
children: [
this._dummyExpanded(),
Text('this is real data 2'),
],
),
)
],
),
);
}
}
The layout output is what I expected (the text is in right), however there's unneeded code.
As you see I use unnecessary method _dummyExpanded to fill
available space which it's just expanded with empty container. Of course it will be hard to read since there are many nested row and column, how I remove that unneeded method without loss layout output what I expect?
I believe I should have use alignment but I don't know how to
Method 1.
Container(
child: Row(
mainAxisAlignment:MainAxisAlignment.end,
children: [
Text('this is real data 2'),
],
),
)
Method 2.
I prefer this method, You can wrap text with this method.
You can also use Flexible widget instead of Expanded
Container(
child: Row(
children: [
Expanded(child: Text('this is real data 2', textAlign:TextAlign.end )),
],
),
)
Method 3.
If you have only Text widgets as children of Column widget then you can set crossAxisAlignment: CrossAxisAlignment.end, for your parent Column widget.
The goal is to have a ListView that contains a multiline texfield (with an arbitrary number of lines, maxLines=null) that is followed by several ListTiles. When lines are added to the TextField, it grows and the ListTiles should move accordingly. However, there is an unexpected behaviour with the following code:
#override
Widget build(BuildContext context) {
ListView l = new ListView(children: [
TextField(maxLines: null),
SizedBox(height: 50, child: ColoredBox(color: Colors.yellow,child: Text("Tile1"),) ),
ListTile(tileColor: Colors.blueGrey,title: Text("Tile1"),),
ListTile(tileColor: Colors.blueGrey,title: Icon(Icons.looks_two_rounded),)
]);
return Scaffold(backgroundColor: Color(0xdcdcffff), body: Center(child: l));
}
https://gfycat.com/fr/obviousshorttermchihuahua
The green colored box moves down at expected but the ListTiles do not (although their children do), until I scroll, then they move where they should've been.
Is there any way to solve this ?
I don't know what exactly caused the bug, but I found a workaround that could perhaps be useful to someone trying to do the same: I put the ListTile in transparent inside a Colored box:
#override
Widget build(BuildContext context) {
ListView l = new ListView(children: [
TextField(maxLines: null),
SizedBox(
height: 50,
child: ColoredBox(
color: Colors.green,
child: Text("Tile1"),
)),
ColoredBox(
color: Color(0x77ff0000),
child: ListTile(
tileColor: Colors.transparent,
title: Text("Tile1"),
),
),
ColoredBox(
color: Color(0x77ff0000),
child: ListTile(
tileColor: Colors.transparent,
title: Icon(Icons.looks_two_rounded),
)),
]);
return Scaffold(body: Center(child: l));
}
https://gfycat.com/fr/idioticquarrelsomegossamerwingedbutterfly
Hi There I am working on a app where i need to use two sections in appbar one upper
1->section with logo and some Icons
2-> Search input field below the Title Section.
UI images are attached for better understanding.
you can customize the size of app bar by using toolbarHeight: 120.0 // set value
then use flexibleSpace to add column or rows
it will look something like this
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
toolbarHeight: 120.10, //set your height
flexibleSpace: SafeArea(
child: Container(
color: Colors.blue, // set your color
child: Column(
children: [
Row(
children: [Text("Logo")],
),
Text("data"), // set an icon or image
IconButton(
icon: Icon(Icons.search),
onPressed: () {}) // set your search bar setting
],
),
),
),
),
),
);
}
}
Just simply create your AppBar as intended, in your screenshot, you don't actually need a second Row. A TextFormField will be enough (you will actually need to customise the InputDecoration as well):
return AppBar(
title: Column(children: [
Row(children: [
Icon(Icons.menu),
Text('First row'),
const Spacer(),
Icon(Icons.person),
]),
TextFormField(),
]),
);
You can use the bottom property from the AppBar widget.
AppBar(
title: YourFirstRowWidget(),
centerTitle: true,
bottom: PreferredSize(
child: YourSearchBarWidget(),
preferredSize: null),
)
But you may want to create your own AppBar widget for a perfect result.
I need to word-wrap some text and have been reading how Flexible and Expanded help make that happen. My problem is the rendering breaks when I put the resulting widgets in a Column. I read that you need to wrap parent columns in Expanded widgets, too, but that gave the same broken result?
Here's a text version of what I'm after
The DartPad code below produces that, but when the commented Column is uncommented, no text is rendered?
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeDat.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return
// Column( children: [ // <- Uncommenting Column breaks rendering
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('[Avatar]'),
SizedBox(width: 10),
Expanded(
child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
Flexible(
child: Text(
'Really Really Really Really Really Really Really Really '
'Really Really Really Really Really Really Long Heading'),
),
Flexible(
child: Text(
'Really Really Really Really Really Really Really Really '
'Really Really Really Really Really Really Long Text'),
),
]),
),
SizedBox(width: 10),
Text('[Button]'),
// ]),
],
);
}
}
You can solve the issue just by wrapping the Row with an Expanded.
try this
Flexible(fit: FlexFit.loose,child:.....)
I have a CustomPaint that needs to be a 1:1 square, and I need to put this in a Row. The horizontal and vertical space available can vary, so I need both the length and width of the square to be the smallest maximum constraint.
How can I achieve this behaviour?
I've tried using LayoutBuilder for this:
Row(
children: [
...,
LayoutBuilder(
builder: (context, constraints) {
final size = min(constraints.maxWidth, constraints.maxHeight);
return SizedBox(
width: size,
height: Size,
child: CustomPaint(...),
),
},
),
]
),
This, however, doesn't work, because Row provides unbounded horizontal constraints (maxWidth == double.infinity). Using the FittedBox widget also fails for the same reason.
Wrapping the LayoutBuilder in an Expanded widget provides it with a bounded maximum width, but I need to have another widget next to it in the Row, so this is not appropriate. Flexible behaves like Expanded in this case, as well.
I think you can get what you want from the AspectRatio widget... if you tell it 1:1, then it tries to make a square unless completely not possible.
Please try the code below, using Align widget restrains the widget to a square :
import 'package:flutter/material.dart';
import 'dart:math';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
flex: 1,
child: Container(),
),
Expanded(
flex: 2,
child: LayoutBuilder(
builder: (context, constraints) {
final size = min(constraints.maxWidth, constraints.maxHeight);
return Align(
alignment: Alignment.centerRight,
child: Container(
height: size,
width: size,
color: Colors.amber,
),
);
},
),
),
// Expanded(
// flex: 1,
// child: Container(),
// ),
],
);
}
}
I ended up working this issue by moving the responsibility of keeping the widget square up the tree. Widgets that were using the square widget knew more about what other things they were showing and were more capable of giving it the right constraints.