2
2

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 3 years have passed since last update.

[Flutter]サンプルコードでdartファイル分割を行ってみた

Posted at

#やりたいこと
 ・サンプルコードを別ファイルのdartファイルで分割したい
  →公式サイトを見ると一画面にコーディングされているので、どうやって呼び出せるのかわからない。。

#理由
 MVCを意識した構成にしたいけど、どうやればいいのかわからない。。
 今後UI単位で分割したい時などが出てくると思うが、どうやれば実現可能なのかわからない。

#環境
Windows10
Android Studio3.5.1
Flutter 1.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84f3d28555 (12 days ago) • 2020-10-15 16:26:19 -0700
Engine • revision b8752bbfff
Tools • Dart 2.10.2

#修正前コード
Flutterプロジェクトを作成すると自動生成されるコードです。
※コメント文は削除しています。

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

#修正後

##コード

main.dart
import 'package:flutter/material.dart';
import 'package:flutterappmoc/ui/myHomePage.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
myHomePage.dart
import 'package:flutter/material.dart';

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,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

#やったこと
①libフォルダの配下に新しいパッケージを作成。
※作業時は、「ui」
②新規dartファイルを作成。作成した新規dartファイルに、main.dartから以下以降の全コードを切り取り、貼り付け。
 ※作業時は、「myHomePage」

class MyHomePage extends StatefulWidget

③main.dartに以下の新規ファイルの参照を追加。

main.dart
import 'package:flutterappmoc/ui/myHomePage.dart';

#補足
他の言語と同様に、他クラスを呼び出しているだけです。
その結果他クラスのdartファイルが呼び出されています。
画面遷移は簡単なのですが、クラス間で値渡しがなかなかできずに困っています。
どなたかいい方法をご存じの方は、教えてください。

home: MyHomePage(title: 'Flutter Demo Home Page'),
2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?