Flutter - Hero Animation[11]

 

 

 

1. 기본 앱 설정

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

 

2. Main 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> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SubPage()),
            );
          },
          child: Container(
            height: 150,
            width: 150,
            child: Hero(
              tag: "flutterimg",
              child: FlutterLogo(),
            ),
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

StatefulWidget 생성후 body에 있는 flutterlogo 이미지에 Hero를 감싼다.

tag는 이동할 페이지에서 인식할 태그를 입력한다.

 

Inkwell을 이용해 클릭시 SubPage로 이동할 수 있도록 한다.

 

 

 

3. Sub Page

class SubPage extends StatefulWidget {
  @override
  _SubPageState createState() => _SubPageState();
}

class _SubPageState extends State<SubPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SubPage"),
      ),
      body: Hero(
        tag: "flutterimg",
        child: Container(
          height: 200,
          width: 200,
          child: FlutterLogo(),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

화면 상단에 flutterlogo가 보이도록 배치하고 Hero태그로 감싼다.

tag는 위에서 지정한 tag와 같게 한다.