1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【flutter】ボタンの配置【超初心者向け】

Posted at

#Flutterがやりたい

androidが気になりつつも、まずは一つの言語をある程度理解するべし!と思ってSwiftばかり触っていました。
まだお世辞にもswift開発ができるようになったとは言えませんが、アプリをいくつか作ったことによって作り方はわかるようになりました。
ここでの作り方とは、ボタンを設置する、考えた通りのUIデザインにする、希望通りの動作をするといったところです。

そうなると、さらに欲が出てきました。
そう、androidの開発です。

前々からkotlinかflutterを触りたかった(ちょっと触っては逃げていた)のですが、ぐっと気合を入れて、今swiftで作ったものくらい作りたいなぁと思います。

ということで、備忘録替わりに初心者中の初心者っぽいことから書いていきます。

##とにかく配置
そもそも、flutterはプロジェクトを始めたときからいろいろ書いてある。
これが僕には悩みどころでした。
「どこに書いたら追加されるん?」
適当に書いてはエラーの嵐、ボタンの配置とか初歩すぎるのか、技術ブログにすら詳しく書いてない。

あれこれ試して、やっと表示されました。

Screenshot_1641863468.jpg

main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
                onPressed: (){/*タップされた時の処理*/},
                child: Text('追加したボタン1'),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

新しいプロジェクトを立ち上げて、Emptyを選んだ状態から

ElevatedButton(
                onPressed: (){/*タップされた時の処理*/},
                child: Text('追加したボタン1'),
            )

の部分だけを追加しました。

なるほど、bodyの中のchildの中のchildrenに入力するのか・・・。

##次の疑問点
「childの前にも後ろにも違うchildが置けない」

今回設置できたボタンの場所は、ラベルの下だったので同じchildrenに入力するのはわかったのですが、ちょっと違う場所に配置するにはどうすればいいのか・・・

まだまだ旅は始まったばかりです。

まとまりのない文章になってしまい、申し訳ないです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?