Loosing alignments - flutter

In the following code, by uncommenting // return child; the Alignment works, but when wrapping child with Column we loose the Alignment
Why? and how to fix it?
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: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
final child = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.topLeft,
child: Container(width: 100, height: 100, color: Colors.blue),
),
Container(width: 100, height: 500, color: Colors.red),
Align(
alignment: Alignment.center,
child: Container(width: 100, height: 300, color: Colors.green),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(width: 100, height: 200, color: Colors.yellow),
),
Container(width: 100, height: 100, color: Colors.purple),
],
);
// return child;
return Column(
children: [
child,
],
);
}
}


The code below will solve your problem. I just wrapped the 'child' widget with 'Expanded'.
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: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
final child = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.topLeft,
child: Container(width: 100, height: 100, color: Colors.blue),
),
Container(width: 100, height: 500, color: Colors.red),
Align(
alignment: Alignment.center,
child: Container(width: 100, height: 300, color: Colors.green),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(width: 100, height: 200, color: Colors.yellow),
),
Container(width: 100, height: 100, color: Colors.purple),
],
);
// return child;
return Column(
children: [
Expanded(child: child,),
],
);
}
}

Related

I cant find anything wrong. why cant I add 2 containers in the Column

home: Scaffold(
backgroundColor: Colors.teal,
body: Column(
children: [
Container(
color: Colors.red,
width: 100,
height: 100,
)
Container(
color: Colors.blue,
width: 100,
height: 100,
)

You have forgot to include , end of the Container
Scaffold(
backgroundColor: Colors.teal,
body: Column(
children: [
Container(
color: Colors.red,
width: 100,
height: 100,
), //this
Container(
color: Colors.blue,
width: 100,
height: 100,
)
],
),
);
If you are using vs-code, try Error Lens extension

Since you have used home:Scaffold I believe you have a material app. If you had included const before the return Material app it will throw an error here.. also as #Yeasin Sheikh mentioned you have missed a , between Container widgets
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(
home: Scaffold(
body: Column(
children: [
Container(
color: Colors.red,
width: 100,
height: 100,
),
Container(
color: Colors.blue,
width: 100,
height: 100,
)
],
),
));
}
}

Draw image above 3 Rows

I have 3 Rows and i want draw a picture as a line, please look at picture.
I tryed stack but dosent work for me

Try this code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Stack(
children: [
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(width: 60, height: 60, color: Colors.red),
Container(width: 60, height: 60, color: Colors.green),
Container(width: 60, height: 60, color: Colors.blue),
],
),
),
Center(
child: Container(
color: Colors.purple,
height: 10,
width: 200,
),
),
],
),
);
}
}
Result:
Live example: DartPad

Flutter -How To Expand a Column

I have a Column: child: Column( children: [ Container( height: 200, width: 300, color: Colors.red, ), Align( alignment: Alignment.bottomCenter, child: Text("This Product is Built By Imtiaz")), ], ),
I want to Expand Column to print Text At Bottom Of Screen

You could put a Spacer() between your Text widget and your Container widget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
children: [
Container(
height: 200,
width: 300,
color: Colors.red,
),
Spacer(),
Text("This Product is Built By Imtiaz"),
],
),
),
),
);
}
}

Flutter: Scroll bar within a container in Flutter web

I want to add a scroll bar within a fixed size container in Flutter web as shown in the picture link below. Can anyone give me advice on this? I am stuck here. I have tried Single child scroll view with Flutter_web_scrollbar but it doesn't work. Here is the code.
Container(
width: 300,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: _bcontroller,
child: Column(
children: [
Container(
width: 300,
child: Row(
children: [
Text(
'${eventList.length > 0 ? i['ShipName'] : ''}',
),
],
),
),
Container(
width: 300,
child: Row(
children: [
Text(
'${eventList.length > 0 ? i[getEventDesc()].toString() : ''}',
),
],
),
),
SizedBox(
height: 10,
),
],
),
),
)
Example

Wrap SingleChildScrollView with Scrollbar Widget.
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: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 200,
child: Scrollbar(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
Container(
width: 300,
height: 100,
child: Row(
children: [
Text(
'your variable',
),
],
),
),
Container(
width: 300,
height: 100,
child: Row(
children: [
Text(
'your variable',
),
],
),
),
SizedBox(
height: 10,
),
],
),),
),
);
}
}

how to make a icon get out from container on flutter

Hi guys i'm try to make this on flutter: img
i'm try with that code, but work
Container(
child: Positioned(top:0, left:0)
)```

as an option you can use Stack as container for card widget + image
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: Stack(
children: <Widget>[
Card(
color: Colors.blueAccent,
child: Container(
width: 300,
height: 80,
),
),
FractionalTranslation(
translation: Offset(0, -0.5),
child: Icon(Icons.android, size: 48),
),
],
),
),
),
);
}
}