Flutter Columnの要素を左寄せにするサンプル

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
Column(
crossAxisAlignment: CrossAxisAlignment.start,
Columnの引数「crossAxisAlignment」にCorssAxisAlignment.startを指定します。
Columnの要素を左寄せにするには、引数「crossAxisAlignment」を使います。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SizedBox(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 200,
width: 200,
color: Colorsred,
),
Container(
height: 200,
width: 200,
color: Colors.blue,
),
@override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: SizedBox( width: double.infinity, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: 200, width: 200, color: Colorsred, ), Container( height: 200, width: 200, color: Colors.blue, ),
@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SizedBox(
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 200,
                width: 200,
                color: Colorsred,
              ),
              Container(
                height: 200,
                width: 200,
                color: Colors.blue,
              ), 

 

Flutter

Posted by arkgame