[Flutter] 메모 1

2020. 12. 27. 10:29Flutter Mobile App/Flutter 메모 앱

반응형

페이지 간 이동 기능 적용 : + 메모 추가 버튼 클릭 시 페이지 이동

네비게이터 반영

 

 


메인

[main.dart]

더보기
import 'package:flutter/material.dart';
import 'screens/home_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MEMO',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'MINOKUMA - MEMO'),
    );
  }
}

홈페이지

[screens/home_page.dart]

 

더보기
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'write_page.dart';

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('여러번 클릭!'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          print('[+ 메모 추가 액션버튼] 클릭');
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => WritePage())
          );
        },
        tooltip: '+',
        label: Text('메모 추가'),
        icon: Icon(Icons.add),
      ),
    );
  }
}

 

 


작성 페이지

[screens/write_page.dart]

 

더보기
import 'package:flutter/material.dart';

class WritePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
    );
  }
}
반응형

'Flutter Mobile App > Flutter 메모 앱' 카테고리의 다른 글

[Flutter] 메모 6  (0) 2020.12.27
[Flutter] 메모 5  (0) 2020.12.27
[Flutter] 메모 4  (0) 2020.12.27
[Flutter] 메모 3  (0) 2020.12.27
[Flutter] 메모 2  (0) 2020.12.27